| <code-exampleformat="typescript"hideCopylanguage="typescript"> import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; </code-example> | Import `platformBrowserDynamic` from `@angular/platform-browser-dynamic`. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> platformBrowserDynamic().bootstrapModule(AppModule); </code-example> | Bootstraps the application, using the root component from the specified `NgModule`. |
| NgModules | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> import { NgModule } from '@angular/core'; </code-example> | Import `NgModule` from `@angular/core`. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> declarations: [ 
 MyRedComponent, 
 MyBlueComponent, 
 MyDatePipe 
] </code-example> | List of components, directives, and pipes that belong to this module. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> imports: [ 
 BrowserModule, 
 SomeOtherModule 
] </code-example> | List of modules to import into this module. Everything from the imported modules is available to `declarations` of this module. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> exports: [ 
 MyRedComponent, 
 MyDatePipe 
] </code-example> | List of components, directives, and pipes visible to modules that import this module. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> providers: [ 
 MyService, 
 { provide: … } 
] </code-example> | List of dependency injection providers visible both to the contents of this module and to importers of this module. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> bootstrap: [MyAppComponent] </code-example> | List of components to bootstrap when this module is bootstrapped. |
| Template syntax | Details |
|:--- |:--- |
| <code-exampleformat="html"hideCopylanguage="html"><input [value]="firstName"></code-example> | Binds property `value` to the result of expression `firstName`. |
| <code-exampleformat="html"hideCopylanguage="html"><div [attr.role]="myAriaRole"></code-example> | Binds attribute `role` to the result of expression `myAriaRole`. |
| <code-exampleformat="html"hideCopylanguage="html"><div [class.extra-sparkle]="isDelightful"></code-example> | Binds the presence of the CSS class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`. |
| <code-exampleformat="html"hideCopylanguage="html"><div [style.width.px]="mySize"></code-example> | Binds style property `width` to the result of expression `mySize` in pixels. Units are optional. |
| <code-exampleformat="html"hideCopylanguage="html"><button (click)="readRainbow($event)"></code-example> | Calls method `readRainbow` when a click event is triggered on this button element \(or its children\) and passes in the event object. |
| <code-exampleformat="html"hideCopylanguage="html"><div title="Hello {{ponyName}}"></code-example> | Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <code-exampleformat="html"hideCopylanguage="html"><div [title]="'Hello ' + ponyName"></code-example> |
| <code-exampleformat="html"hideCopylanguage="html"><p>
 Hello {{ponyName}} 
</p></code-example> | Binds text content to an interpolated string, for example, "Hello Seabiscuit". |
| <code-exampleformat="html"hideCopylanguage="html"><my-cmp [(title)]="name"></code-example> | Sets up two-way data binding. Equivalent to: <code-exampleformat="html"hideCopylanguage="html"><my-cmp [title]="name" (titleChange)="name=$event"></code-example> |
| <code-exampleformat="html"hideCopylanguage="html"><video #movieplayer …></video>
<button (click)="movieplayer.play()">
 Play 
</button></code-example> | Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template. |
| <code-exampleformat="html"hideCopylanguage="html"><p *myUnless="myExpression">
 …
</p></code-example> | The asterisk \(`*`\) character turns the current element into an embedded template. Equivalent to: <code-exampleformat="html"hideCopylanguage="html"><ng-template [myUnless]="myExpression">
 <p>
 …
 </p>
</ng-template></code-example> |
| <code-exampleformat="html"hideCopylanguage="html"><p>
 Card No.: {{cardNumber | myCardNumberFormatter}} 
</p></code-example> | Transforms the current value of expression `cardNumber` using the pipe called `myCardNumberFormatter`. |
| <code-exampleformat="html"hideCopylanguage="html"><p>
 Employer: {{employer?.companyName}} 
</p></code-example> | The safe navigation operator \(`?`\) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored. |
| <code-exampleformat="html"hideCopylanguage="html"><svg:rect x="0" 
 y="0" 
 width="100" 
 height="100"/></code-example> | An SVG snippet template needs an `svg:` prefix on its root element to disambiguate the SVG element from an HTML component. |
| <code-exampleformat="html"hideCopylanguage="html"><svg>
 <rect x="0" 
 y="0" 
 width="100" 
 height="100"/>
</svg></code-example> | An `<svg>` root element is detected as an SVG element automatically, without the prefix. |
| Built-in directives | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> import { CommonModule } from '@angular/common'; </code-example> | Import `CommonModule` from `@angular/common`. |
| <code-exampleformat="html"hideCopylanguage="html"><section *ngIf="showSection"></code-example> | Removes or recreates a portion of the DOM tree based on the `showSection` expression. |
| <code-exampleformat="html"hideCopylanguage="html"><li *ngFor="let item of list"></code-example> | Turns the `li` element and its contents into a template, and uses that to instantiate a view for each item in list. |
| <code-exampleformat="html"hideCopylanguage="html"><div [ngSwitch]="conditionExpression">
 <ng-template [ngSwitchCase]="case1Exp">
 …
 </ng-template>
 <ng-template ngSwitchCase="case2LiteralString">
 …
 </ng-template>
 <ng-template ngSwitchDefault>
 …
 </ng-template>
</div></code-example> | Conditionally swaps the contents of the `div` by selecting one of the embedded templates based on the current value of `conditionExpression`. |
| <code-exampleformat="html"hideCopylanguage="html"><div [ngClass]="{'active': isActive, 
 'disabled': isDisabled}"></code-example> | Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return `{class-name: true/false}` map. |
| <code-exampleformat="html"hideCopylanguage="html"><div [ngStyle]="{'property': 'value'}">
<div [ngStyle]="dynamicStyles()"></code-example> | Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component. |
| Forms | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> import { FormsModule } from '@angular/forms'; </code-example> | Import `FormsModule` from `@angular/forms`. |
| <code-exampleformat="html"hideCopylanguage="html"><input [(ngModel)]="userName"></code-example> | Provides two-way data-binding, parsing, and validation for form controls. |
| Class decorators | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> import { Directive, … } from '@angular/core'; </code-example> | Import `Directive, …` from `@angular/core';`. |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@Component({…}) 
class MyComponent() {} </code-example> | Declares that a class is a component and provides metadata about the component. |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@Directive({…}) 
class MyDirective() {} </code-example> | Declares that a class is a directive and provides metadata about the directive. |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@Pipe({…}) 
class MyPipe() {} </code-example> | Declares that a class is a pipe and provides metadata about the pipe. |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@Injectable() 
class MyService() {} </code-example> | Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. |
| Directive configuration | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@Directive({ 
 property1: value1, 
 …
}) </code-example> | Add `property1` property with `value1` value to Directive. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> selector: '.cool-button:not(a)' </code-example> | Specifies a CSS selector that identifies this directive within a template. Supported selectors include `element`, `[attribute]`, `.class`, and `:not()`. <br/> Does not support parent-child relationship selectors. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> providers: [ 
 MyService, 
 { provide: … } 
] </code-example> | List of dependency injection providers for this directive and its children. |
| Component configuration <br/>`@Component` extends `@Directive`, so the `@Directive` configuration applies to components as well | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> viewProviders: [MyService, { provide: … }] </code-example> | List of dependency injection providers scoped to this component's view. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> template: 'Hello {{name}}' 
templateUrl: 'my-component.html' </code-example> | Inline template or external template URL of the component's view. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> styles: ['.primary {color: red}'] 
styleUrls: ['my-component.css'] </code-example> | List of inline CSS styles or external stylesheet URLs for styling the component's view. |
| Class field decorators for directives and components | Details |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@Input() myProperty; </code-example> | Declares an input property that you can update using property binding \(example: `<my-cmp [myProperty]="someExpression">`\). |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@Output() myEvent = new EventEmitter(); </code-example> | Declares an output property that fires events that you can subscribe to with an event binding \(example: `<my-cmp (myEvent)="doSomething()">`\). |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@HostBinding('class.valid') isValid; </code-example> | Binds a host element property \(here, the CSS class `valid`\) to a directive/component property \(`isValid`\). |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@HostListener('click', ['$event']) onClick(e) {…} </code-example> | Subscribes to a host element event \(`click`\) with a directive/component method \(`onClick`\), optionally passing an argument \(`$event`\). |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@ContentChild(myPredicate) myChildComponent; </code-example> | Binds the first result of the component content query \(`myPredicate`\) to a property \(`myChildComponent`\) of the class. |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@ContentChildren(myPredicate) myChildComponents; </code-example> | Binds the results of the component content query \(`myPredicate`\) to a property \(`myChildComponents`\) of the class. |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@ViewChild(myPredicate) myChildComponent; </code-example> | Binds the first result of the component view query \(`myPredicate`\) to a property \(`myChildComponent`\) of the class. Not available for directives. |
| <code-exampleformat="typescript"hideCopylanguage="typescript">@ViewChildren(myPredicate) myChildComponents; </code-example> | Binds the results of the component view query \(`myPredicate`\) to a property \(`myChildComponents`\) of the class. Not available for directives. |
| Directive and component change detection and lifecycle hooks \(implemented as class methods\) | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> constructor(myService: MyService, …) { … } </code-example> | Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngOnChanges(changeRecord) { … } </code-example> | Called after every change to input properties and before processing content or child views. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngOnInit() { … } </code-example> | Called after the constructor, initializing input properties, and the first call to `ngOnChanges`. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngDoCheck() { … } </code-example> | Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngAfterContentInit() { … } </code-example> | Called after `ngOnInit` when the component's or directive's content has been initialized. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngAfterContentChecked() { … } </code-example> | Called after every check of the component's or directive's content. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngAfterViewInit() { … } </code-example> | Called after `ngAfterContentInit` when the component's views and child views / the view that a directive is in has been initialized. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngAfterViewChecked() { … } </code-example> | Called after every check of the component's views and child views / the view that a directive is in. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> ngOnDestroy() { … } </code-example> | Called once, before the instance is destroyed. |
| Dependency injection configuration | Details |
|:--- |:--- |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> { provide: MyService, useClass: MyMockService } </code-example> | Sets or overrides the provider for `MyService` to the `MyMockService` class. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> { provide: MyService, useFactory: myFactory } </code-example> | Sets or overrides the provider for `MyService` to the `myFactory` factory function. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> { provide: MyValue, useValue: 41 } </code-example> | Sets or overrides the provider for `MyValue` to the value `41`. |
| <code-exampleformat="html"hideCopylanguage="html"><router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet></code-example> | Marks the location to load the component of the active route. |
| <code-exampleformat="html"hideCopylanguage="html"><a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor"></code-example> | Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the `/` prefix; for a child route, use the `./`prefix; for a sibling or parent, use the `../` prefix. |
| <code-exampleformat="html"hideCopylanguage="html"><a [routerLink]="[ '/path' ]" routerLinkActive="active"></code-example> | The provided classes are added to the element when the `routerLink` becomes the current active route. |
| <code-exampleformat="html"hideCopylanguage="html"><a [routerLink]="[ '/path' ]" routerLinkActive="active" ariaCurrentWhenActive="page"></code-example> | The provided classes and `aria-current` attribute are added to the element when the `routerLink` becomes the current active route. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> function canActivateGuard: CanActivateFn = 
 ( 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 

{ path: …, canActivate: [canActivateGuard] } </code-example> | An interface for defining a function that the router should call first to determine if it should activate this component. Should return a <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> function canDeactivateGuard: CanDeactivateFn<T> = 
 ( 
 component: T, 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 

{ path: …, canDeactivate: [canDeactivateGuard] } </code-example> | An interface for defining a function that the router should call first to determine if it should deactivate this component after a navigation. Should return a <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> function canActivateChildGuard: CanActivateChildFn = 
 ( 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 

{ path: …, canActivateChild: [canActivateGuard], children: … } </code-example> | An interface for defining a function that the router should call first to determine if it should activate the child route. Should return a <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> function resolveGuard implements ResolveFn<T> = 
 ( 
 route: ActivatedRouteSnapshot, 
 state: RouterStateSnapshot 
 ) => { … } 

{ path: …, resolve: [resolveGuard] } </code-example> | An interface for defining a function that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value. |
| <code-exampleformat="typescript"hideCopylanguage="typescript"> function canLoadGuard: CanLoadFn = 
 ( 
 route: Route 
 ) => { … } 

{ path: …, canLoad: [canLoadGuard], loadChildren: … } </code-example> | An interface for defining a function that the router should call first to check if the lazy loaded module should be loaded. Should return a <code>boolean|UrlTree</code> or an Observable/Promise that resolves to a <code>boolean|UrlTree</code>. |
