Angular 2 Cheat Sheet

Angular 2 Cheat Sheet

Binding One Way Binding <h1>{{pageTitle}}</h1> Two Way Binding <input [(ngMo­del­)]=­"­cus­tom­er.F­ir­stN­ame­"> Property Binding <img [src]=­"­cus­tom­er.i­ma­geU­rl"> Attribute Binding <button [attr.a­ri­a-l­abe­l]=­"­ok">­Ok<­/bu­tto­n> Class Binding <div [class.Se­lec­ted­]="S­ele­cte­d">S­ele­cte­d</­div> ngClass <div [ngClass]="setClasses()">   {{customer.name}} </div> Style Binding <button [style.co­lor­]="i­sSe­lected ? 'red' : 'white­'"> ngStyle <div [ngStyle]="setStyles()">   {{customer.name}} </div> Component Binding <cu­sto­mer­-detail [customer]="currentCustomer"> <customer-detail> Directive Binding <div [ngClass] = "­{se­lected: isSele­cte­d}">­Cus­tom­er<­/di­v> Event Binding <button (click­)="s­ave­()">­Sav­e</­but­ton> $event <input [value]="customer.name"  (input)="customer.name=$event.target.value"> Lifecycle Hooks OnInit export class Customer implements OnInit {   ngOnInit() {} } OnChanges export class Customer implements OnChanges {   ngOnChanges() {} } AfterV­iewInit export class Customer implements AfterV­iewInit {   ngAfterViewInit() {} } OnDestroy export class Customer implements OnDestroy {   ngOnDestroy() {} } Pipes Upper Case <p>{{customer.name | upperc­ase­}}<­/p> Lower Case <p>{{customer.name | lowerc­ase­}}<­/p> Date <p>{{orderDate | date:'­med­ium­'}}­</p> Date Format <p>{{orderDate | date:'­yMM­Md'­'}}­</p> Currency <p>{{price | curren­cy}­}</­p> Percent <p>{{taxes | percen­t:'­1.1­-1'­}}<­/p> Number <p>­value | number­:'1.1-­2'}­}</­p> JSON Debugging <pre>{{Customer | json}}­</p­re> Component with Inline Template import { Component } from '@angular/core'; @Component({   moduleId: module.id,   selector: 'customer',   template: `     <h3>{{customer.name}}</h3>   ` }) export class CustomerComponent {   customer = { id: 100, name: 'John Smith' }; }

Structural Directives *ngIf <div *ngIf="currentCustomer">   Selected {{currentCustomer.Name}} </d­iv> *ngFor <ul>   <li *ngFor­="let customer of customers">     {{ custom­er.name }}   </li> </ul> *ngSwitch <div [ngSwitch]="orderStatus">   <template [ngSwitchCase]="purchased"></template>   <template [ngSwitchCase]="shipped"></template>   <template [ngSwitchDefault]></template> </div> Service //Example: customer.service.ts import { HttpModule } from '@angular/http' @Injectable() export class CustomerService {   constructor(private http: Http) { }   getCustomers() {     return this.http.get('api/customers')       .map((response: Response) => <Customer[]>response.json().data)       .catch(this.handleError);   }   private handleError(error: Response) {     console.error(error);     return Observable.throw(error.json().error || 'Service error');   } } Injecting a Service //Example: customer-list.component.ts export class CustomerListComponent {   customers: Customer[];      constructor(private customerService: CustomerService) { } } Component Linked Template import { Component } from '@angular/core'; @Component({   moduleId: module.id,   selector: 'customer',   templateUrl: 'customer.component.html',   styleUrls: ['customer.component.css'] }) export class CustomerComponent {   customer = { id: 100, name: 'John Smith' }; }