Stable Interface What it does Indicates that a class can implement to be a guard deciding if a route can be activated. How to use class UserToken {} class Permissions { canActivate(user: UserToken, id: string): boolean { return true; } } @Injectable() class CanActivateTeam implements CanActivate { constructor(private permissions: Permissions, private currentUser: UserToken) {} canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<bo

Experimental Directive What it does Creates a view that will be added/removed from the parent NgPlural when the given expression matches the plural expression according to CLDR rules. How to use <some-element [ngPlural]="value"> <ng-container *ngPluralCase="'=0'">...</ng-container> <ng-container *ngPluralCase="'other'">...</ng-container> </some-element> See NgPlural for more details and example. Class Overview class NgPluralCase { constructor(va

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

Experimental Class Class Overview class ApplicationInitStatus { constructor(appInits: (() => any)[]) done : boolean donePromise : Promise<any> } Class Description A class that reflects the state of running APP_INITIALIZERs. Annotations @Injectable() Constructor constructor(appInits: (() => any)[]) Class Details done : boolean donePromise : Promise<any> exported from @angular/core/index, defined in @angular/core/src/application_init.ts

Stable Pipe What it does Transforms string to lowercase. How to use expression | lowercase NgModuleCommonModule Description Converts value into lowercase string using String.prototype.toLowerCase(). Example @Component({ selector: 'lowerupper-pipe', template: `<div> <label>Name: </label><input #name (keyup)="change(name.value)" type="text"> <p>In lowercase: <pre>'{{value | lowercase}}'</pre> <p>In uppercase: <pre>'{{v

Stable Directive What it does Acts as a placeholder that Angular dynamically fills based on the current router state. How to use <router-outlet></router-outlet> <router-outlet name='left'></router-outlet> <router-outlet name='right'></router-outlet> A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed. <router-outlet (activate)='onActivate($event)' (deactivat

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

Techniques for Dependency Injection Dependency Injection is a powerful pattern for managing code dependencies. In this cookbook we will explore many of the features of Dependency Injection (DI) in Angular. Table of contents Application-wide dependencies External module configuration @Injectable and nested service dependencies Limit service scope to a component subtree Multiple service instances (sandboxing) Qualify dependency lookup with @Optional and @Host Inject the component's DOM element De

Experimental Interface Interface Overview interface SchemaMetadata { name : string } Interface Description Interface for schema definitions in @NgModules. Interface Details name : string exported from @angular/core/index, defined in @angular/core/src/metadata/ng_module.ts

Stable Pipe What it does Transforms string to uppercase. How to use expression | uppercase NgModuleCommonModule Description Converts value into lowercase string using String.prototype.toUpperCase(). Example @Component({ selector: 'lowerupper-pipe', template: `<div> <label>Name: </label><input #name (keyup)="change(name.value)" type="text"> <p>In lowercase: <pre>'{{value | lowercase}}'</pre> <p>In uppercase: <pre>'{{v