Angular 2 Cheat Sheet
by Greg Finzer (GregFinzer) via [Link]/15280/cs/10781/
Binding Pipes
One Way Binding <h1>{{pageTitle}}</h1> Upper Case <p>{{[Link] | uppercase}}</p>
Two Way Binding <input [(ngModel)]="[Link]"> Lower Case <p>{{[Link] | lowercase}}</p>
Property Binding <img [src]="[Link]"> Date <p>{{orderDate | date:'medium'}}</p>
Attribute Binding <button [[Link]-label]="ok">Ok</button> Date Format <p>{{orderDate | date:'yMMMd''}}</p>
Class Binding <div [[Link]]="Selected">Selected</div> Currency <p>{{price | currency}}</p>
ngClass <div [ngClass]="setClasses()"> Percent <p>{{taxes | percent:'1.1-1'}}</p>
{{[Link]}} Number <p>value | number:'1.1-2'}}</p>
</div>
JSON Debugging <pre>{{Customer | json}}</pre>
Style Binding <button [[Link]]="isSelected ? 'red' : 'white'">
ngStyle <div [ngStyle]="setStyles()">
{{[Link]}}
</div>
Component <customer-detail [customer]="currentCustomer">
Binding <customer-detail>
Directive Binding <div [ngClass] = "{selected:
isSelected}">Customer</div>
Event Binding <button (click)="save()">Save</button>
$event <input [value]="[Link]"
(input)="[Link]=$[Link]">
Lifecycle Hooks
OnInit export class Customer implements OnInit {
ngOnInit() {}
}
OnChanges export class Customer implements OnChanges {
ngOnChanges() {}
}
AfterViewInit export class Customer implements AfterViewInit {
ngAfterViewInit() {}
}
OnDestroy export class Customer implements OnDestroy {
ngOnDestroy() {}
}
By Greg Finzer (GregFinzer) Published 6th February, 2017. Sponsored by [Link]
[Link]/gregfinzer/ Last updated 9th February, 2017. Learn to solve cryptic crosswords!
[Link] Page 1 of 2. [Link]
Angular 2 Cheat Sheet
by Greg Finzer (GregFinzer) via [Link]/15280/cs/10781/
Component with Inline Template Service (cont)
import { Component } from '@angular/core'; }
@Component({
moduleId: [Link], Injecting a Service
selector: 'customer',
//Example: [Link]
template: `
export class CustomerListComponent {
<h3>{{[Link]}}</h3>
customers: Customer[];
`
})
constructor(private customerService:
export class CustomerComponent {
CustomerService) { }
customer = { id: 100, name: 'John Smith' };
}
}
Component Linked Template
Structural Directives
import { Component } from '@angular/core';
*ngIf <div *ngIf="currentCustomer">
@Component({
Selected {{[Link]}}
moduleId: [Link],
</div>
selector: 'customer',
*ngFor <ul>
templateUrl: '[Link]',
<li *ngFor="let customer of customers">
{{ [Link] }} styleUrls: ['[Link]']
</li> })
</ul> export class CustomerComponent {
*ngSwitch <div [ngSwitch]="orderStatus"> customer = { id: 100, name: 'John Smith' };
<template [ngSwitchCase]="purchased"></template> }
<template [ngSwitchCase]="shipped"></template>
<template [ngSwitchDefault]></template>
</div>
Service
//Example: [Link]
import { HttpModule } from '@angular/http'
@Injectable()
export class CustomerService {
constructor(private http: Http) { }
getCustomers() {
return [Link]('api/customers')
.map((response: Response) =>
<Customer[]>[Link]().data)
.catch([Link]);
}
private handleError(error: Response) {
[Link](error);
return [Link]([Link]().error ||
'Service error');
}
By Greg Finzer (GregFinzer) Published 6th February, 2017. Sponsored by [Link]
[Link]/gregfinzer/ Last updated 9th February, 2017. Learn to solve cryptic crosswords!
[Link] Page 2 of 2. [Link]
