Stable Class Class Overview class QueryList { changes : Observable<any> length : number first : T last : T map(fn: (item: T, index: number, array: T[]) => U) : U[] filter(fn: (item: T, index: number, array: T[]) => boolean) : T[] reduce(fn: (prevValue: U, curValue: T, curIndex: number, array: T[]) => U, init: U) : U forEach(fn: (item: T, index: number, array: T[]) => void) : void some(fn: (value: T, index: number, array: T[]) => boolean) : boolean toA

Stable Interface Interface Overview interface Attribute { attributeName : string } Interface Description Attribute decorator and metadata. Interface Details attributeName : string exported from @angular/core/index, defined in @angular/core/src/metadata/di.ts

Setting the document or window title using the Title service. Our app should be able to make the browser title bar say whatever we want it to say. This cookbook explains how to do it. See the . To see the browser Title bar changes, pop out the preview window by clicking the blue 'X' button in the upper right corner. The problem with <title> The obvious approach is to bind a property of the component to the HTML <title> like this: <title>{{This_Does_Not_Work}}</title>

Stable Pipe What it does Converts value into JSON string. How to use expression | json NgModuleCommonModule Description Converts value into string using JSON.stringify. Useful for debugging. Example @Component({ selector: 'json-pipe', template: `<div> <p>Without JSON pipe:</p> <pre>{{object}}</pre> <p>With JSON pipe:</p> <pre>{{object | json}}</pre> </div>` }) export class JsonPipeComponent { object: Ob

Stable Directive Class Overview class NgSelectOption { constructor(_element: ElementRef, _renderer: Renderer, _select: SelectControlValueAccessor) id : string ngValue value ngOnDestroy() } Selectors option Class Description Marks <option> as dynamic, so Angular can be notified when options change. Example <select name="city" ngModel> <option *ngFor="let c of cities" [value]="c"></option> </select> Constructor constructor(_element: Elem

Stable Class Class Overview class CommonModule { } Class Description The module that includes all the basic Angular directives like NgIf, NgFor, ... Annotations @NgModule({ declarations: [COMMON_DIRECTIVES, COMMON_PIPES], exports: [COMMON_DIRECTIVES, COMMON_PIPES], providers: [ {provide: NgLocalization, useClass: NgLocaleLocalization}, ], }) exported from @angular/common/index, defined in @angular/common/src/common_module.ts

Stable Interface What it does Contains the information about a route associated with a component loaded in an outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to traverse the router state tree. How to use @Component({templateUrl:'./my-component.html'}) class MyComponent { constructor(route: ActivatedRoute) { const id: string = route.snapshot.params.id; const url: string = route.snapshot.url.join(''); const user = route.snapshot.data.user; } }

Experimental Directive What it does Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization. How to use <some-element [ngPlural]="value"> <ng-container *ngPluralCase="'=0'">there is nothing</ng-container> <ng-container *ngPluralCase="'=1'">there is one</ng-container> <ng-container *ngPluralCase="'few'">there are a few</ng-container> <ng-container *ngPluralCase="'other'">there are exactly #</ng-container>

Stable Interface What it does Configures the Injector to return a value of another useExisting token. How to use const provider: ExistingProvider = {provide: 'someToken', useExisting: 'someOtherToken'}; Interface Overview interface ExistingProvider { provide : any useExisting : any multi : boolean } Interface Description For more details, see the Dependency Injection Guide. Example class Greeting { salutation = 'Hello'; } class FormalGreeting extends Greeting { salutation =

Stable Directive What it does Adds and removes CSS classes on an HTML element. How to use <some-element [ngClass]="'first second'">...</some-element> <some-element [ngClass]="['first', 'second']">...</some-element> <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element> Class Overview class NgClass { constructor(_iterableDiffers