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

Question

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.

Answer 1

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.

Answer 2

Just like this

 constructor(   private router:Router  ){}  this.router.events   .filter(event=> event instanceof NavigationStart)   .subscribe((event:NavigationStart)=>{      // TODO   });