Show Menu
Cheatography

Angular 5 Cheat Sheet (DRAFT) by

Simple cheat sheet for Angular 5

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Binding

One Way binding
<p>{{ descri­ption }}<­/p>
Two Way Binding
<input [(ngMo­del­)]=­"­use­r.n­ame­" />
Property Binding
<img [src]=­"­use­r.i­mag­eUR­L" />
Attr­ibute Binding
<b­utton [attr.a­ri­a-l­abe­l]=­"­sub­mit­"­>Su­bmi­t</­but­ton­>
Class Binding
<div [class.se­lec­ted­]="S­ele­cte­d">S­ele­cte­d</­div­>
ngClass
<div [ngCla­ss]­="{'­sel­ected' : isSele­cte­d()­}">S­ele­ctable Item</­div­>
ngClass
<div [ngCla­ss]­="ge­tCl­ass­es(­)">I­tem­</d­iv>
Style Binding
<b­utton [style.co­­lo­r­]­="i­­sSe­­lected ? 'red' : 'white­­'">
ngStyle
<div [ngSty­le]­="{'­bac­kgr­oun­d-i­mage': 'url(/­pat­h/t­o/i­mg.j­pg­)'}­"­>It­em<­/di­v>
ngStyle
<div [ngSty­le]­="se­tSt­yle­s()­"> {{customer.name}} </d­iv>
Comp­onent Binding
<m­y-a­pp-­com­ponent [user]­="ac­tiv­eUs­er">­</m­y-a­pp-­com­pon­ent­>
Event Binding
<b­utton (click­)="s­ubm­it(­)">S­ubm­it<­/bu­tto­n>
$event
<input [value­]="n­ame­" (input­)="n­ame­=$e­ven­t.t­arg­et.v­al­ue">

Angular Lifecycle Hooks (in sequence)

ngOn­Cha­nge­s()
Called before ngOnInit and when any input properties change.
ngOn­Ini­t()
Called once after the first ngOnC­han­ges.
ngDo­Che­ck()
Called during every change detection run, immedi­ately after ngOnC­hanges and ngOnI­nit.
ngAf­ter­Con­ten­tIn­it()
Called once after first ngDoC­heck. Component only hook
ngAf­ter­Con­ten­tCh­eck­ed()
Called after the ngAft­erC­ont­ent­Init and after every subse­quent ngDoC­heck. Component only hook
ngAf­ter­Vie­wIn­it()
Called once after the first ngAft­erC­ont­ent­Che­cked. Component only hook
ngAf­ter­Vie­wCh­eck­ed()
Called after the ngAft­erV­iew­Init and every subse­quent ngAft­erC­ont­ent­Che­cked. Component only hook
ngOn­Des­tro­y()
Called just before Angular destroys the direct­ive­/co­mponent

Pipes

Upper Case
{{user.name | upperc­­as­e­}}
Title Case
{{user.name | titlec­ase}}
Lower Case
{{user.name | lowerc­­as­e­}}
Date
{{orderDate | date:'­­me­d­i­um­­'}}­
Date Format
{{orderDate | date:'­­yM­M­M­d'­­'}}­
Curr­ency
{{price | curren­­cy}­}
Perc­ent
{{taxes | percen­­t:­'­1.1­­-1'­}}
Number
­{{value | number­­:'­1.1­-­2­'}­}
JSON Debug
{{user | json}}­
Slice
{{dataArray | slice:­1:3}}
 

Structural Directives

ngIf - Removes or recreates a portion of the DOM tree based on the showS­ection expres­sion.
<s­ection *ngIf=­"­sho­wSe­cti­on">...<­/s­ect­ion­>
ngFor - Turns the li element and its contents into a template, and uses that to instan­tiate a view for each item in list.
<li *ngFor­="let item of list">{{item.name}}</li>
ngSw­itch - Condit­ionally swaps the contents of the div by selecting one of the embedded templates based on the current value of condi­tio­nEx­pre­ssion.
<div [ngSwi­tch­]="c­ond­iti­onE­xpr­ess­ion­"> <ng­-te­mplate [ngSwi­tch­Cas­e]=­"­cas­e1E­xp">...<­/n­g-t­emp­lat­e> <ng­-te­mplate ngSwit­chC­ase­="ca­se2­Lit­era­lSt­rin­g">...<­/ng­-te­mpl­ate> <ng­-te­mplate ngSwit­chD­efa­ult­>...</­ng-­tem­pla­te> </d­iv>
import { Common­Module } from '@angu­lar­/co­mmon';

Class Decorators

@Com­pon­ent­({...})
Declares class is a component and provides metadata.
@Dir­ect­ive­({...})
Declares class is a directive and provides metadata.
@Pip­e({...})
Declares class is a pipe and provides metadata.
@Inj­ect­abl­e({...})
Declares this class has depend­encies that should be injected into the constr­uctor on instance creation.
import { Directive, ... } from '@angu­lar­/co­re';

@Directive Config­uration

sele­ctor: '.butt­on:­not(a)`
Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attri­bute], .class, and :not(). Does not support parent­-child relati­onship selectors.
prov­ide­rs: [MySer­vice, { provide: ... }]
List of dependency injection providers for this directive and its children.
@Dire­ctive({ property1: value1, ... })

@Component Config­uration

modu­leId: module.id
If set, the templa­teUrl and styleUrl are resolved relative to the component.
view­Pro­vid­ers: [MySer­vice, { provide: ... }]
List of dependency injection providers scoped to this compon­ent's view.
temp­late: 'Hello {{name}}'
Inline template
temp­lat­eUrl: 'my-co­mpo­nen­t.html'
External template URL
styl­es: ['.primary {color: red}']
Inline template styles
styl­eUr­ls: ['my-c­omp­one­nt.c­ss']
External template styles URL
@Comp­onent extends @Direc­tive, so the @Directive config­uration applies to compon­ents.
               

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi