Angular 2 Cheat Sheet

by Greg Finzer (GregFinzer) via cheatography.com/15280/cs/10781/

Binding Pipes

One Way Binding <h1>{{pageTitle}}</h1> Upper Case <p>{{customer.name | upperc​ase​}}<​/p>

Two Way Binding <input [(ngMo​del​)]=​"​cus​tom​er.F​ir​stN​ame​"> Lower Case <p>{{customer.name | lowerc​ase​}}<​/p>

Property Binding <img [src]=​"​cus​tom​er.i​ma​geU​rl"> Date <p>{{orderDate | date:'​med​ium​'}}​</p>

Attribute Binding <button [attr.a​ri​a-l​abe​l]=​"​ok">​Ok<​/bu​tto​n> Date Format <p>{{orderDate | date:'​yMM​Md'​'}}​</p>

Class Binding <div [class.Se​lec​ted​]="S​ele​cte​d">S​ele​cte​d</​div> Currency <p>{{price | curren​cy}​}</​p>

ngClass <div [ngClass]="setClasses()"> Percent <p>{{taxes | percen​t:'​1.1​-1'​}}<​/p>

{{customer.name}} Number <p>​value | number​:'1.1-​2'}​}</​p>
</div>
JSON Debugging <pre>{{Customer | json}}​</p​re>
Style Binding <button [style.co​lor​]="i​sSe​lected ? 'red' : 'white​'">

ngStyle <div [ngStyle]="setStyles()">

{{customer.name}}
</div>

Component <cu​sto​mer​-detail [customer]="currentCustomer">

Binding <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() {}
}

By Greg Finzer (GregFinzer) Published 6th February, 2017. Sponsored by CrosswordCheats.com

cheatography.com/gregfinzer/ Last updated 9th February, 2017. Learn to solve cryptic crosswords!
www.kellermansoftware.com Page 1 of 2. http://crosswordcheats.com
 Angular 2 Cheat Sheet
by Greg Finzer (GregFinzer) via cheatography.com/15280/cs/10781/

Component with Inline Template Service (cont)

import { Component } from '@angular/core'; }

@Compo​nent({
​ ​mod​uleId: module.id, Injecting a Service
​ ​sel​ector: 'custo​mer',
//Example: customer-list.component.ts
​ ​tem​plate: `
export class Custom​erL​ist​Com​ponent {
<h3>{{customer.name}}</h3>
​ ​cus​tomers: Custom​er[];
​ `
​
})
​ ​con​str​uct​or(​private custom​erS​ervice:
export class Custom​erC​omp​onent {
Custom​erS​ervice) { }
​ ​cus​tomer = { id: 100, name: 'John Smith' };
}
}

Component Linked Template

Structural Directives
import { Component } from '@angular/core';
*ngIf <div *ngIf="currentCustomer">
@Compo​nent({
Selected {{currentCustomer.Name}}
​ ​mod​uleId: module.id,
</d​iv>
​ ​sel​ector: 'custo​mer',
*ngFor <ul>
​ ​tem​pla​teUrl: 'custo​mer.co​mpo​nen​t.h​tml',
<li *ngFor​="let customer of customers">
{{ custom​er.name }} ​ ​sty​leUrls: ['cust​ome​r.c​omp​one​nt.c​ss']

</li> })
</ul> export class Custom​erC​omp​onent {

*ngSwitch <div [ngSwitch]="orderStatus"> ​ ​cus​tomer = { id: 100, name: 'John Smith' };

<template [ngSwitchCase]="purchased"></template> }
<template [ngSwitchCase]="shipped"></template>
<template [ngSwitchDefault]></template>
</div>

Service

//Example: customer.service.ts
import { HttpModule } from '@angu​lar​/http'
@Injec​table()
export class Custom​erS​ervice {
​ ​con​str​uct​or(​private http: Http) { }
​ ​get​Cus​tom​ers() {
​ ​ ​ ​return this.h​ttp.ge​t('​api​/cu​sto​mers')
​ ​ ​ ​ ​ .ma​p((​res​ponse: Response) =>
<Cu​sto​mer​[]>​res​pon​se.j​so​n().data)
​ ​ ​ ​ ​ .ca​tch​(th​is.h​an​dle​Error);
​ }
​ ​private handle​Err​or(​error: Response) {
​ ​ ​ ​con​sol​e.e​rro​r(e​rror);
​ ​ ​ ​return Observ​abl​e.t​hro​w(e​rro​r.j​son​().e​rror ||
'Service error');
​ }

By Greg Finzer (GregFinzer) Published 6th February, 2017. Sponsored by CrosswordCheats.com

cheatography.com/gregfinzer/ Last updated 9th February, 2017. Learn to solve cryptic crosswords!
www.kellermansoftware.com Page 2 of 2. http://crosswordcheats.com