Experimental Class Class Overview class SpyLocation { urlChanges : string[] setInitialPath(url: string) setBaseHref(url: string) path() : string isCurrentPathEqualTo(path: string, query?: string) : boolean simulateUrlPop(pathname: string) simulateHashChange(pathname: string) prepareExternalUrl(url: string) : string go(path: string, query?: string) replaceState(path: string, query?: string) forward() back() subscribe(onNext: (value: any) => void, onThrow?: (error:

Stable Directive Class Overview class MinLengthValidator { minlength : string ngOnChanges(changes: SimpleChanges) validate(c: AbstractControl) : {[key: string]: any} registerOnValidatorChange(fn: () => void) } Selectors [minlength][formControlName] [minlength][formControl] [minlength][ngModel] Class Description A directive which installs the MinLengthValidator for any formControlName, formControl, or control with ngModel that also has a minlength attribute. Class Details min

Stable Interface Interface Overview interface SafeScript { } Interface Description Marker interface for a value that's safe to use as JavaScript. exported from @angular/platform-browser/index, defined in @angular/platform-browser/src/security/dom_sanitization_service.ts

Stable Class What it does Lifecycle hook that is called after data-bound properties of a directive are initialized. How to use . @Component({selector: 'my-cmp', template: `...`}) class MyComponent implements OnInit { ngOnInit() { // ... } } Class Overview class OnInit { ngOnInit() : void } Class Description ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked

Share information between different directives and components This cookbook contains recipes for common component communication scenarios in which two or more components share information. Table of contents Pass data from parent to child with input binding Intercept input property changes with a setter Intercept input property changes with ngOnChanges Parent listens for child event Parent interacts with child via a local variable Parent calls a ViewChild Parent and children communicate via a se

Stable Const Variable Export export NG_ASYNC_VALIDATORS Providers for asynchronous validators to be used for FormControls in a form. Provide this using multi: true to add validators. See NG_VALIDATORS for more details. exported from @angular/forms/index defined in @angular/forms/src/validators.ts

Stable Function What it does Registers routes. How to use @NgModule({ imports: [RouterModule.forChild(ROUTES)], providers: [provideRoutes(EXTRA_ROUTES)] }) class MyNgModule {} Class Export export provideRoutes(routes: Routes) : any exported from @angular/router/index defined in @angular/router/src/router_module.ts

User input triggers DOM events. We listen to those events with event bindings that funnel updated values back into our components and models. When the user clicks a link, pushes a button, or enters text we want to know about it. These user actions all raise DOM events. In this chapter we learn to bind to those events using the Angular event binding syntax. Run the live example. Binding to user input events We can use Angular event bindings to respond to any DOM event. The syntax is simple. We s

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

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