The Angular Router raises events when it navigates from one route to another route. It raises several events such as NavigationStart, NavigationEnd, NavigationCancel, NavigationError, ResolveStart, etc. You can listen to these events and find out when the state of the route changes. Some of the useful events are route change start ( NavigationStart ) and route change end ( NavigationEnd). In this tutorial, we learn what is router events are and how to listen to them using Example code.
Table of Contents
Router Events
The Angular Routers triggers several events starting with when the Navigation starts ( NavigationStart ) and also when the Navigation end ( NavigationEnd ) successfully. It is triggered when the navigation is canceled either by the user ( NavigationCancel ) or due to an error in the navigation ( NavigationError). The Events trigger when the lazy loaded modules are about to load and when they finish loading. They trigger before and after the guards like canActivate, canActivateChild. Events fire before and after the Angular runs the Route Resolvers..
The following are the list of events that are fire by the Angular Router.
| Router Event | The Event triggered when |
|---|---|
| NavigationStart | the Angular router stats the navigation. |
| RouteConfigLoadStart | the Router lazy loads a route configuration. |
| RouteConfigLoadEnd | after a route has been lazy-loaded. |
| RoutesRecognized | the Router parses the URL and the routes are recognized. |
| GuardsCheckStart | the Router begins the Guards phase of routing. |
| ChildActivationStart | the Router begins activating a route's children. |
| ActivationStart | the Router begins activating a route. |
| GuardsCheckEnd | the Router finishes the Guards phase of routing successfully. |
| ResolveStart | the Router begins the Resolve phase of routing. |
| ResolveEnd | the Router finishes the Resolve phase of routing successfully. |
| ChildActivationEnd | the Router finishes activating a route's children. |
| ActivationEnd | the Router finishes activating a route. |
| NavigationEnd | navigation ends successfully. |
| NavigationCancel | navigation is canceled. This is due to a Route Guard returning false during navigation. |
| NavigationError | navigation fails due to an unexpected error. |
| Scroll | An event that represents a scrolling event. |
Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular
How to Listen to Router Events
First, we need to import the event, which we want to listen to. The following example imports NavigationStart. We also need to import the NavigationEvent & router.
1 2 3 4 5 | import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router'; |
And inject the Router in the constructor
1 2 3 4 5 6 | constructor(private router:Router) { } |
And finally in you can listen to events by subscribing to the router.events observable.
The router.events is an Observable that gets triggered when the route changes. We receive NavigationEvent as the parameter in the callback. We check the NavigationEvent instance to check the Type of event fired.
1 2 3 4 5 6 7 8 9 | this.router.events .subscribe( (event: NavigationEvent) => { if(event instanceof NavigationStart) { console.log(event); } }); |
Or you can make use of the rxjs filter operator to filter out the required events as shown below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import { filter } from 'rxjs/operators'; import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router'; this.router.events .pipe( filter( event =>event instanceof NavigationStart) ) .subscribe( (event: NavigationEvent) => { console.log(event); } ) |
Summary
The Router events allow us to watch for the router state changes and run some custom logic. One of the use case scenarios is to show the loading indicator when the user navigates from one route to another. You can listen to NavigationStart and NavigationEnd events to achieve this result
nice. very useful. say I want to refresh the window after comparing the hash to a variable I made… how am I to update the window to make sure the changes(some custom) I make take effect?
thanks bro!
thanks