Stable Type-alias What it does Represents router configuration. Interface Overview interface Routes { } Interface Description Routes is an array of route configurations. Each one has the following properties: path is a string that uses the route matcher DSL. pathMatch is a string that specifies the matching strategy. component is a component type. redirectTo is the url fragment which will replace the current matched segment. outlet is the name of the outlet the component should be p

Stable Class What it does Sets up the router to be used for testing. How to use beforeEach(() => { TestBed.configureTestModule({ modules: [ RouterTestingModule.withRoutes( [{path: '', component: BlankCmp}, {path: 'simple', component: SimpleCmp}])] ) ] }); }); Class Overview class RouterTestingModule { staticwithRoutes(routes: Routes) : ModuleWithProviders } Class Description The modules sets up the router to be used for testing. It provides spy imp

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

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 }

Stable Class What it does Contains all the router outlets created in a component. Class Overview class RouterOutletMap { registerOutlet(name: string, outlet: RouterOutlet) : void removeOutlet(name: string) : void } Class Description Class Details registerOutlet(name: string, outlet: RouterOutlet) : void Adds an outlet to this map. removeOutlet(name: string) : void Removes an outlet from this map. exported from @angular/router/index, defined in @angular/router/src/router_outlet_ma

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 Class What it does Adds router directives and providers. How to use RouterModule can be imported multiple times: once per lazily-loaded bundle. Since the router deals with a global shared resource--location, we cannot have more than one router service active. That is why there are two ways to create the module: RouterModule.forRoot and RouterModule.forChild. forRoot creates a module that contains all the directives, the given routes, and the router service itself. forChild creates

Stable Directive What it does Lets you link to specific parts of your app. See RouterLink for more information. Class Overview class RouterLinkWithHref { constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy) target : string queryParams : {[k: string]: any} fragment : string routerLinkOptions : {preserveQueryParams: boolean, preserveFragment: boolean} preserveQueryParams : boolean preserveFragment : boolean href : string routerLink

Stable Directive What it does Lets you add a CSS class to an element when the link's route becomes active. How to use <a [routerLink]='/user/bob' routerLinkActive='active-link'>Bob</a> Class Overview class RouterLinkActive { constructor(router: Router, element: ElementRef, renderer: Renderer) links : QueryList<RouterLink> linksWithHrefs : QueryList<RouterLinkWithHref> routerLinkActiveOptions : {exact: boolean} ngAfterContentInit() : void routerL

Stable Directive What it does Lets you link to specific parts of your app. How to use Consider the following route configuration: [{ path: 'user/:name', component: UserCmp }] When linking to this user/:name route, you can write: <a routerLink='/user/bob'>link to user component</a> Class Overview class RouterLink { constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy) queryParams : {[k: string]: any} fragment : string preserveQu