tsangular

[tsangular]

Providing base href dynamically

import {Component, NgModule} from '@angular/core'; import {APP_BASE_HREF} from '@angular/common'; @NgModule({  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}] }) class AppModule {}

[tsangular]

Inspect the router's configuration

export class AppComponent {    constructor(router: Router) {        console.error(router.config);    }    title:string = "Events App"; }

The router supports both styles with two LocationStrategy providers:

PathLocationStrategy - the default "HTML 5 pushState" style.

HashLocationStrategy - the "hash URL" style.

[tsangular]

Pre-loading

Out of the box, the router either never preloads, or preloads every lazy-load module. But custom strategies are also available.

@NgModule({    imports: [        RouterModule.forRoot(appRoutes, {            preloadingStrategy :PreloadAllModules        })    ],    exports: [        RouterModule    ],    providers: [AuthGuard] })

[tsangular]

Reusing the query params across routes

You can also preserve query parameters and fragments across navigations without having to re-provide them when navigating. In the LoginComponent, you'll add an object as the second argument in the router.navigate function and provide the preserveQueryParams and preserveFragment to pass along the current query parameters and fragment to the next route.

src/app/login.component.ts (preserve)COPY CODE

// Set our navigation extras object // that passes on our global query params and fragment let navigationExtras: NavigationExtras = {  preserveQueryParams: true,  preserveFragment: true }; // Redirect the user this.router.navigate([redirect], navigationExtras);

[tsangular]

Component-Less Route

This is used if you want children to handle everything.

[tsangular]

Route guards

Accordingly, a routing guard can return an Observable<boolean> or a Promise<boolean> and the router will wait for the observable to resolve to true or false.

Or it can directly return true of false as well.

The router checks the CanDeactivate and CanActivateChild guards first, from deepest child route to the top. Then it checks the CanActivate guards from the top down to the deepest child route.

[tsangular]

Displaying multiple routes in named outlets

The router only supports one primary unnamed outlet per template but any no of named outlets.

Secondary routes:

They are independent of each other

They work in combination with other routes.

They are displayed in named outlets

closePopup() { // Providing a `null` value to the named outlet // clears the contents of the named outlet this.router.navigate([{ outlets: { popup: null }}]); }

This is how to travel to that named outlet

<a [routerLink]="['/',{ outlets: { popup: ['compose'] } }]">Contact</a>

[tsangular]

Navigation using relative paths

this.router.navigate([crisis.id], { relativeTo: this.route });

& here are the types defined:

private service: CrisisService, private route: ActivatedRoute, private router: Router

If you were using a RouterLink to navigate instead of the Router service, you'd use the same link parameters array, but you wouldn't provide the object with the relativeTo property. The ActivatedRoute is implicit in a RouterLink directive.

So use it directly like this:

<a [routerLink]="[crisis.id]"

going back one level:

this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });

[tsangular]

Child routes

Child routes work like a app but on a smaller version:

@Component({  template:  `    <h2>CRISIS CENTER</h2>    <router-outlet></router-outlet>  ` }) export class CrisisCenterComponent { }

Unlike AppComponent, and most other components, it lacks a selector. It doesn't need one since you don't embed this component in a parent template, instead you use the router to navigate to it.

const crisisCenterRoutes: Routes = [{    path: 'crisis-center',    component: CrisisCenterComponent,    children: [{        path: '',        component: CrisisListComponent,        children: [{            path: ':id',            component: CrisisDetailComponent        }, {            path: '',            component: CrisisCenterHomeComponent        }]    }] }];

[tsangular]

Adding animations:

@Component ({    template: "<div>DETAIL {{dataId}}</div>",    //way to define animations    animations: [ slideInDownAnimation ] })

& this goes inside the class for the component:

@HostBinding('@routeAnimation') routeAnimation = true; @HostBinding('style.display')   display = 'block'; @HostBinding('style.position')  position = 'absolute';

[tsangular]

<a [routerLink]="['/events',{a:32,b:3222,c:322}]"

this way you are sending optional params. (matrix URL notation)

Even these will be part of route params but as they are optional, use observables + switchMap

Additionally, for adding dynamic classes

[class.selected]="isSelected(hero)"

[tsangular]

Accessing route params without observables.

ngOnInit() {  // (+) converts string 'id' to a number  let id = +this.activatedRoute.snapshot.params['id']; }

This way you can access the route params if you already know that the route params for this component will never change during the lifetime of the component. This activatedRoute.snapshot just contains the initial dataset

[tsangular]

ActivatedRoute

When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.

There are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions.

The ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.

Feel free to unsubscribe anyway. It is harmless and never a bad practice.

[tsangular]

Accessing the route info

import { Router, ActivatedRoute, Params } from '@angular/router';

ngOnInit() {    let data:any = this.activatedRoute.params;    console.error(data.value); }

or use switchMap for iterating or converting one observable into another.

https://angular.io/docs/ts/latest/guide/router.html

[tsangular]

Router Info

Only call RouterModule.forRoot in the root AppRoutingModule. In any other module, you must call the RouterModule.forChild method to register additional routes.

onSelect(event, code) {    this.router.navigate(['/events', code]);    console.error(code) }

[tsangular]

Routing Module

Moving all the routing config to app-routing.module.ts:

import { EventListComponent }  from './event-list/event-list.component'; import { EventDetailComponent } from './event-detail/event-detail.component' import { RouterModule, Routes } from '@angular/router'; import { NgModule } from '@angular/core'; const appRoutes: Routes = [    { path: 'events', component: EventListComponent, data: {} },    { path: 'events/:id', component: EventDetailComponent },    { path: '', redirectTo: '/events', pathMatch: 'full' },    { path: '**', component: EventListComponent } ]; @NgModule({    imports: [        RouterModule.forRoot(appRoutes)    ],    exports: [        RouterModule    ] }) export class AppRoutingModule {}

[tsangular]

router-outlet

Angular includes the component when it finds router-outlet directive in html.

<router-outlet></router-outlet>

Passing params in routing:

<a [routerLink]="['/events']"   [queryParams]="{ foo: 'foo', bar: 'bar' }" routerLinkActive="active"> {{event.name}} </a>