Angular 2 router event listener

by

new router

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

old

Inject the Router and subscribe to route change events

import {Router} from 'angular2/router';

class MyComponent {
  constructor(router:Router) {
    router.subscribe(...)
  }
}

NOTE

For the new router, 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.

See also

More Related Contents:

  1. In Angular, how do you determine the active route?
  2. How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2
  3. Importing lodash into angular2 + typescript application
  4. Angular 2 Sibling Component Communication
  5. JS : Convert Array of Strings to Array of Objects
  6. angular 2 how to return data from subscribe
  7. How to redirect to an external URL from angular2 route without using component?
  8. Deep copy an array in Angular 2 + TypeScript
  9. angular 2 disable url encoding
  10. How to call JavaScript functions from Typescript in Angular 5?
  11. ngOnInit not being called when Injectable class is Instantiated
  12. Angular 4 pass data between 2 not related components
  13. Angular 2 – communication of typescript functions with external js libraries
  14. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  15. Rxjs toPromise() deprecated
  16. How to check for isBrowser in Angular 4
  17. How to achieve a debounce service on input keyup event in angular2 with rxjs
  18. Call a function on click event in Angular 2
  19. How to Pass data from child to parent component Angular
  20. Change route params without reloading in Angular 2
  21. Angular2 too many file requests on load
  22. Scroll to element on click in Angular 4
  23. Storing Objects in localStorage
  24. Subscribe to observable is returning undefined
  25. Plain Javascript as Angular 2 service
  26. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  27. Property ‘catch’ does not exist on type ‘Observable’
  28. angular 2 access ng-content within component
  29. binding data to angular checkbox
  30. Autoscroll in Angular 2

Leave a Comment