Angular2 Cheat Sheet (DRAFT) by thorstenschaefer

import {Component, Input, EventEmitter} from ‘angular2/core’
@Component({
     selector: ‘favorite’,
     template: `<div (click)="onClick()">
                 {{ favorite ? "I like it" : "I don't like it" }}
                </div>
                `
})
export class Component { 
  @Input() isFavorite = false;
  @Output() change = new EventEmitter();
  
  onClick() {
    this.isFavorite = !this.isFavorite();
    this.change.emit( { newValue : this.isFavorite } );
  }
}

import {FavoriteComponent} from ‘./favorite.component’

@Component({ 
  selector: "componentUser"
  template: ‘<favorite [isFavorite]="true" (change)="onFavoriteChange($event)"></favorite >’, 
  directives: [FavoriteComponent] 
})
export class ComponentUser {
  onFavoriteChange($event) {
    console.log("Favorite component fired change event: " + $event);
  }
}

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import {IUser} from './iuser';

@Injectable()
export class UserService {

  private url = 'http://jsonplaceholder.typicode.com/users';
  
  constructor(private http:Http) {}

  getUsers(): Observable<IUser[]> {
    return this.http.get(this.url)
       .map(response => response.json());
  }
}

 import {Component, OnInit} from 'angular2/core';
import MyService from "./my-service.service";

@Component({ 
  providers: [UserService]
})
export class CourseComponent {

  users: Array<IUser> = undefined;

  constructor(userService: UserService) {   } 

  ngOnInit() {
    this.userService.getUsers().subscribe(users => { this.users = users; } }); 
  }
}

import {Directive} from ‘angular2/core’;
import {ElementRef, Renderer} from ‘angular2/core’;

@Directive({ 
  selector: [myDirective],
  host: { 
    ‘(onmouseenter)’ : ‘gettingFocus()’,
    ‘(onmouseleave)’ : ‘leavingFocus()’
}  })
export class MyDirective {

  constructor(el: ElementRef, renderer: Renderer) {  } 

  gettingFocus() {
    this.renderer.setElementStyle(this.el.nativeElement.style.color='red')
  }
  leavingFocus() { ... }
}

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({ name: 'shorten' })
export class ShortenPipe implements PipeTransform {
  transform(value: string, args: string[]) {
    var limit = (args && args[0]) ? args[0] : 20;
    if (value)
      return value.substring(0, limit) + "...";
  }
}

 import {Component} from 'angular2/core';
import {ShortenPipe} from './shorten.pipe';

@Component({
  selector: 'my-app',
  template: '{{ longText | shorten:10 }},
  pipes: [ShortenPipe]
export class AppComponent {
  longText = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
  ...
}

<form #f="ngForm" (ngSubmit)="onSubmit(f.form)">
  <div class="form-group">
    <label for="name">Name</label>

    <!-- Input field -->
    <input ngControl="name" #name="ngForm"
      class="form-control" 
      name="name" type="text"
      required minlength="3"
    />

    <!-- Error messages -->
    <div  *ngIf="name.touched && name.errors">
      <div class="alert alert-danger"  *ngIf="name.errors.required">
        Name is required.
      </div>
      <div class="alert alert-danger"  *ngIf="name.errors.minlength">
        Name should be minimum {{ name.errors.minlength.requiredLength}} characters.
      </div>
    </div>
  </div>
 
  <!-- More input elements -->

  <button class="btn btn-primary" type="submit" [disabled]="!f.valid">
    Submit
  </button>
</form>

<form [ngFormModel]="form" (ngSubmit)="onSubmit(f.form)">
  <div class="form-group">
    <label for="name">Name</label>

    <!-- Input field -->
    <input ngControl="name" #name="ngForm"
      class="form-control" 
      name="name" type="text"
    />

    <!-- Error messages -->
    <div class="alert alert-danger"  *ngIf="!name.valid">
      Name is required.
    </div>
  </div>
 
  <!-- More input elements -->

  <button class="btn btn-primary" type="submit" [disabled]="!f.valid">
    Submit
  </button>
</form>


The typescript file:

import {Component} from 'angular2/core';
import {ControlGroup, Control, Validators} from 'angular2/common';

@Component({
  selector: 'my-form',
  templateUrl: 'my-form.component.html'
})
export class MyFormComponent {

  form = new ControlGroup({
     name : new Control('initial value', Validators.required)
    // one control for each input
  });
}

import {Control} from 'angular2/common';

export class MyValidators {
  // synchronous validator
  static cannotContainSpace(control: Control) {
    if (control.value.indexOf(' ') < 0)
      return null; // valid
    return { cannotContainSpace: true }; // invalid
  }

  // asynchronous validator
  static shouldBeUnique(control: Control) {
    return new Promise((resolve, reject) => {
      // simulating server call
      setTimeout(function() { 
        if (control.value == "duplicate")
          resolve({ shouldBeUnique: true}); // validation fails
        else
          resolve null; // validation passes
        },1000);
    });
  }

}

...
signUp() {
  var result = authService.login(this.form.value); // call some authentication service
  if (result.error) { 
    this.form.find('username').setErrors({
      invalidLogin: true
    });
  }
}

import {CanDeactivate, ComponentInstruction} from 'angular2/router';
...
export class MyComponent implements CanDeactivate {

  form : ControlGroup;

  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : boolean {
    if (!this.form.dirty)
      return true;
    return confirm('You have unsaved changes. Are you sure to leave?');
  }

}