jhades

@Component({ 
    selector: 'app',
    template: `
            <div class="toggle-panel" *ngIf="show" 
                [hidden]="hidden" [style.visibility]="visibility">Toggle Me</div>
            
            <button (click)="toggleShow()">Show</button>
            <button (click)="toggleHidden()">Hidden</button>
            <button (click)="toggleVisible()">Visible</button>
            

jhades

@Component({ 
    selector: 'app',
    directives: [ShowOne, ShowOneContainer, ShowOneTrigger],
    template: `
    <div class="tab-container" showOneContainer> 
    
        <ul class="tab-buttons">
            <li showOneTrigger="superman" [active]="true">Superman</li> 
            <li showOneTrigger="batman">Batman</li>

jhades

@Component({ 
    selector: 'app',
    pipes: [SortPipe],
    template: `
            <div class="pipe-example">
                <label>Uppercase Pipe: {{ message | uppercase }}</label>
            </div>
            

jhades

ng.probe($0)

ng.probe($0).componentInstance

ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()

jhades

var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();

builder.loadConfig('./system.config.js')
    .then(function(){

        return builder.bundle(
            'app',

jhades

This repository is available at the following location: https://github.com/angular-academy/courses/tree/master/01-getting-started-with-angular2

No Global dependencies are needed. To install the code, you can run the following command in a terminal window:

npm install

The installation should take a few minutes. When its done, you can build the project and start a server using the followinf code:

npm start

jhades

addTodo(newTodo:Todo):Observable {
    let obs = this.todoBackendService.saveTodo(newTodo);

    obs.subscribe(
            res => {
                this._todos.next(this._todos.getValue().push(newTodo));
            });

    return obs;
}

jhades

// create an empty object - no class was needed !!
var superhero = {};
 
superhero.name = 'Superman';  
superhero.strength = 100;

jhades

<form class="ng-pristine ng-invalid ng-invalid-required" name="frm">
  
  

jhades

gulp.task('build-css', ['clean'], function() {  
    return gulp.src('./styles/*')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./dist'));
});