Cheat Sheet

Bootstrapping import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule); Bootstraps the app, using the root component from the specified NgModule .

NgModules import { NgModule } from '@angular/core';

@NgModule({ declarations: ..., imports: ...,

exports: ..., providers: ..., bootstrap: ...}) Defines a module that contains components, directives, pipes, and providers.
class MyModule {}

declarations: [MyRedComponent, MyBlueComponent, MyDatePipe] List of components, directives, and pipes that belong to this module.

List of modules to import into this module. Everything from the imported modules is
imports: [BrowserModule, SomeOtherModule]
available to declarations of this module.

exports: [MyRedComponent, MyDatePipe] List of components, directives, and pipes visible to modules that import this module.

List of dependency injection providers visible both to the contents of this module and to
providers: [MyService, { provide: ... }]
importers of this module.

bootstrap: [MyAppComponent] List of components to bootstrap when this module is bootstrapped.

Template syntax

<input [value]="firstName"> Binds property value to the result of expression firstName .

<div [attr.role]="myAriaRole"> Binds attribute role to the result of expression myAriaRole .

Binds the presence of the CSS class extra-sparkle on the element to the truthiness of
<div [class.extra-sparkle]="isDelightful">
the expression isDelightful .

Binds style property width to the result of expression mySize in pixels. Units are
<div [style.width.px]="mySize">
optional.

Calls method readRainbow when a click event is triggered on this button element (or its
<button (click)="readRainbow($event)">
children) and passes in the event object.

Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
<div title="Hello {{ponyName}}">
<div [title]="'Hello ' + ponyName">

<p>Hello {{ponyName}}</p> Binds text content to an interpolated string, for example, "Hello Seabiscuit".

Sets up two-way data binding. Equivalent to:

<my-cmp [(title)]="name">
<my-cmp [title]="name" (titleChange)="name=$event">

<video #movieplayer ...>

Creates a local variable movieplayer that provides access to the video element
<button (click)="movieplayer.play()">
instance in data-binding and event-binding expressions in the current template.
</video>

The * symbol turns the current element into an embedded template. Equivalent to:
<p *myUnless="myExpression">...</p>
<ng-template [myUnless]="myExpression"><p>...</p></ng-template>

Transforms the current value of expression cardNumber via the pipe called
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>
myCardNumberFormatter .

The safe navigation operator ( ? ) means that the employer field is optional and if
<p>Employer: {{employer?.companyName}}</p>
undefined , the rest of the expression should be ignored.

An SVG snippet template needs an svg: prefix on its root element to disambiguate the
<svg:rect x="0" y="0" width="100" height="100"/>
SVG element from an HTML component.

<svg>
<rect x="0" y="0" width="100" height="100"/> An <svg> root element is detected as an SVG element automatically, without the prefix.
</svg>
 Built-in directives import { CommonModule } from '@angular/common';

Removes or recreates a portion of the DOM tree based on the showSection

<section *ngIf="showSection">
expression.

Turns the li element and its contents into a template, and uses that to instantiate a
<li *ngFor="let item of list">
view for each item in list.

<div [ngSwitch]="conditionExpression">
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
Conditionally swaps the contents of the div by selecting one of the embedded
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
templates based on the current value of conditionExpression .
<ng-template ngSwitchDefault>...</ng-template>
</div>

Binds the presence of CSS classes on the element to the truthiness of the
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}"> associated map values. The right-hand expression should return {class-name:
true/false} map.

Forms import { FormsModule } from '@angular/forms';

<input [(ngModel)]="userName"> Provides two-way data-binding, parsing, and validation for form controls.

Class decorators import { Directive, ... } from '@angular/core';

@Component({...})
Declares that a class is a component and provides metadata about the component.
class MyComponent() {}

@Directive({...})
Declares that a class is a directive and provides metadata about the directive.
class MyDirective() {}

@Pipe({...})
Declares that a class is a pipe and provides metadata about the pipe.
class MyPipe() {}

@Injectable() Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of
class MyService() {} this class.

Directive configuration @Directive({ property1: value1, ... })

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element ,
[attribute] , .class , and :not() .
selector: '.cool-button:not(a)'

Does not support parent-child relationship selectors.

providers: [MyService, { provide: ... }] List of dependency injection providers for this directive and its children.

@Component extends @Directive , so the @Directive configuration applies to components

Component configuration
as well

moduleId: module.id If set, the templateUrl and styleUrl are resolved relative to the component.

viewProviders: [MyService, { provide: ... }] List of dependency injection providers scoped to this component's view.

template: 'Hello {{name}}'

Inline template or external template URL of the component's view.
templateUrl: 'my-component.html'

styles: ['.primary {color: red}']

List of inline CSS styles or external stylesheet URLs for styling the component’s view.
styleUrls: ['my-component.css']
 Class field decorators for directives and components import { Input, ... } from '@angular/core';

Declares an input property that you can update via property binding (example:
@Input() myProperty;
<my-cmp [myProperty]="someExpression"> ).

Declares an output property that fires events that you can subscribe to with an event binding
@Output() myEvent = new EventEmitter();
(example: <my-cmp (myEvent)="doSomething()"> ).

Binds a host element property (here, the CSS class valid ) to a directive/component property
@HostBinding('class.valid') isValid;
( isValid ).

Subscribes to a host element event ( click ) with a directive/component method ( onClick ),

@HostListener('click', ['$event']) onClick(e) {...}
optionally passing an argument ( $event ).

Binds the first result of the component content query ( myPredicate ) to a property
@ContentChild(myPredicate) myChildComponent;
( myChildComponent ) of the class.

Binds the results of the component content query ( myPredicate ) to a property

@ContentChildren(myPredicate) myChildComponents;
( myChildComponents ) of the class.

Binds the first result of the component view query ( myPredicate ) to a property
@ViewChild(myPredicate) myChildComponent;
( myChildComponent ) of the class. Not available for directives.

Binds the results of the component view query ( myPredicate ) to a property

@ViewChildren(myPredicate) myChildComponents;
( myChildComponents ) of the class. Not available for directives.

Directive and component change detection and lifecycle

(implemented as class methods)
hooks

constructor(myService: MyService, ...) { ... } Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

ngOnChanges(changeRecord) { ... } Called after every change to input properties and before processing content or child views.

ngOnInit() { ... } Called after the constructor, initializing input properties, and the first call to ngOnChanges .

Called every time that the input properties of a component or a directive are checked. Use it to extend
ngDoCheck() { ... }
change detection by performing a custom check.

ngAfterContentInit() { ... } Called after ngOnInit when the component's or directive's content has been initialized.

ngAfterContentChecked() { ... } Called after every check of the component's or directive's content.

Called after ngAfterContentInit when the component's view has been initialized. Applies to
ngAfterViewInit() { ... }
components only.

ngAfterViewChecked() { ... } Called after every check of the component's view. Applies to components only.

ngOnDestroy() { ... } Called once, before the instance is destroyed.

Dependency injection configuration

{ provide: MyService, useClass: MyMockService } Sets or overrides the provider for MyService to the MyMockService class.

{ provide: MyService, useFactory: myFactory } Sets or overrides the provider for MyService to the myFactory factory function.

{ provide: MyValue, useValue: 41 } Sets or overrides the provider for MyValue to the value 41 .

Routing and navigation import { Routes, RouterModule, ... } from '@angular/router';

const routes: Routes = [

{ path: '', component: HomeComponent },
{ path: 'path/:routeParam', component: MyComponent },
{ path: 'staticPath', component: ... },
{ path: '**', component: ... }, Configures routes for the application. Supports static, parameterized, redirect, and wildcard
{ path: 'oldPath', redirectTo: '/staticPath' }, routes. Also supports custom route data and resolve.
{ path: ..., component: ..., data: { message: 'Custom' } }
]);
const routing = RouterModule.forRoot(routes);

<router-outlet></router-outlet> Marks the location to load the component of the active route.
<router-outlet name="aux"></router-outlet>

<a routerLink="/path"> Creates a link to a different view based on a route instruction consisting of a route path,
<a [routerLink]="[ '/path', routeParam ]"> required and optional parameters, query parameters, and a fragment. To navigate to a root
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> route, use the / prefix; for a child route, use the ./ prefix; for a sibling or parent, use
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> the ../ prefix.
<a [routerLink]="[ '/path' ]" fragment="anchor">

The provided classes are added to the element when the routerLink becomes the
<a [routerLink]="[ '/path' ]" routerLinkActive="active">
current active route.

class CanActivateGuard implements CanActivate {

canActivate(
route: ActivatedRouteSnapshot,
An interface for defining a class that the router should call first to determine if it should
state: RouterStateSnapshot
activate this component. Should return a boolean or an Observable/Promise that resolves to
): Observable<boolean>|Promise<boolean>|boolean { ... }
a boolean.
}

{ path: ..., canActivate: [CanActivateGuard] }

class CanDeactivateGuard implements CanDeactivate<T> {

canDeactivate(
component: T,
route: ActivatedRouteSnapshot, An interface for defining a class that the router should call first to determine if it should
state: RouterStateSnapshot deactivate this component after a navigation. Should return a boolean or an
): Observable<boolean>|Promise<boolean>|boolean { ... } Observable/Promise that resolves to a boolean.
}

{ path: ..., canDeactivate: [CanDeactivateGuard] }

class CanActivateChildGuard implements CanActivateChild {

canActivateChild(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot An interface for defining a class that the router should call first to determine if it should
): Observable<boolean>|Promise<boolean>|boolean { ... } activate the child route. Should return a boolean or an Observable/Promise that resolves to
} a boolean.

{ path: ..., canActivateChild: [CanActivateGuard],

children: ... }

class ResolveGuard implements Resolve<T> {

resolve(
route: ActivatedRouteSnapshot,
An interface for defining a class that the router should call first to resolve route data before
state: RouterStateSnapshot
rendering the route. Should return a value or an Observable/Promise that resolves to a
): Observable<any>|Promise<any>|any { ... }
value.
}

{ path: ..., resolve: [ResolveGuard] }

class CanLoadGuard implements CanLoad {

canLoad(
route: Route An interface for defining a class that the router should call first to check if the lazy loaded
): Observable<boolean>|Promise<boolean>|boolean { ... } module should be loaded. Should return a boolean or an Observable/Promise that resolves
} to a boolean.

{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... }