How to use new NavigationStart @angular-router 3.0.0-alpha.*

Issue

I see these new events in the new Angular 2 Router.

Theres NavigationStart, NavigationEnd, NavigationFailed (or something like that)

Does anyone know how to use these yet? I've messed around with a few things but haven't been able to get them to do anything.

Solution

The Router provides an events observable that can be subscribed to

constructor(router:Router) {
  router.events.subscribe(event => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  }
});

See also

• https://angular.io/docs/ts/latest/api/router/index/Router-interface.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationStart-class.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationEnd-class.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationCancel-class.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationError-class.html
• https://angular.io/docs/ts/latest/api/router/index/RoutesRecognized-class.html

NOTE

don't forget to import NavigationStart from router module

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

because if you don't import it instanceof will not work and an error NavigationStart is not defined will rise.

Answered By - Günter Zöchbauer