ServiceMessageBrokerFactory

Experimental Class Class Overview class ServiceMessageBrokerFactory { createMessageBroker(channel: string, runInZone?: boolean) : ServiceMessageBroker } Class Description Class Details createMessageBroker(channel: string, runInZone?: boolean) : ServiceMessageBroker Initializes the given channel and attaches a new ServiceMessageBroker to it. exported from @angular/platform-webworker/index, defined in @angular/platform-webworker/src/web_workers/shared/service_message_broker.ts

CanLoad

Stable Interface What it does Indicates that a class can implement to be a guard deciding if a children can be loaded. How to use class UserToken {} class Permissions { canLoadChildren(user: UserToken, id: string): boolean { return true; } } @Injectable() class CanLoadTeamSection implements CanLoad { constructor(private permissions: Permissions, private currentUser: UserToken) {} canLoad(route: Route( route: Route ): Observable<boolean>|Promise<boolean>|bool

RouterState

Stable Interface What it does Represents the state of the router. How to use @Component({templateUrl:'template.html'}) class MyComponent { constructor(router: Router) { const state: RouterState = router.routerState; const root: ActivatedRoute = state.root; const child = root.firstChild; const id: Observable<string> = child.params.map(p => p.id); //... } } Interface Overview interface RouterState { snapshot : RouterStateSnapshot toString() : string }

ActivatedRouteSnapshot

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; } }

NavigationExtras

Stable Interface What it does Represents the extra options used during navigation. Interface Overview interface NavigationExtras { relativeTo : ActivatedRoute queryParams : Params fragment : string preserveQueryParams : boolean preserveFragment : boolean skipLocationChange : boolean replaceUrl : boolean } Interface Description Interface Details relativeTo : ActivatedRoute Enables relative navigation from the current ActivatedRoute. Configuration: [{ path: 'parent', co

5. Services

We create a reusable service to manage our hero data calls Services The Tour of Heroes is evolving and we anticipate adding more components in the near future. Multiple components will need access to hero data and we don't want to copy and paste the same code over and over. Instead, we'll create a single reusable data service and learn to inject it in the components that need it. Refactoring data access to a separate service keeps the component lean and focused on supporting the view. It also m

UpperCasePipe

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

ANALYZE_FOR_ENTRY_COMPONENTS

Experimental Const Variable Export export ANALYZE_FOR_ENTRY_COMPONENTS This token can be used to create a virtual provider that will populate the entryComponents fields of components and ng modules based on its useValue. All components that are referenced in the useValue value (either directly or in a nested array or map) will be added to the entryComponents property. Example The following example shows how the router can populate the entryComponents field of an NgModule based on the router

PLATFORM_INITIALIZER

Experimental Const Variable Export export PLATFORM_INITIALIZER A function that will be executed when a platform is initialized. exported from @angular/core/index defined in @angular/core/src/application_tokens.ts

HashLocationStrategy

Stable Class Class Overview class HashLocationStrategy { constructor(_platformLocation: PlatformLocation, _baseHref?: string) onPopState(fn: LocationChangeListener) : void getBaseHref() : string path(includeHash?: boolean) : string prepareExternalUrl(internal: string) : string pushState(state: any, title: string, path: string, queryParams: string) replaceState(state: any, title: string, path: string, queryParams: string) forward() : void back() : void } Class Descri