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 Class What it does Represents an event triggered when routes are recognized. Class Overview class RoutesRecognized { constructor(id: number, url: string, urlAfterRedirects: string, state: RouterStateSnapshot) id : number url : string urlAfterRedirects : string state : RouterStateSnapshot toString() : string } Class Description Constructor constructor(id: number, url: string, urlAfterRedirects: string, state: RouterStateSnapshot) Class Details id : number url :

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 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 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. 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

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. 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 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