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. |
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
There’s another Router Event that I’m receiving that’s not on this list, NavigationSkipped.
Error received:
Router Event: NavigationSkipped
code: 0
id: 132
reason: “Navigation to /my-url was ignored because it is the same as the current Router URL.”
type: 16
url: “/my-url”
‘RouteConfigLoadStart’ – Guys, One more ‘Event’ for Lazy-Load
The RouteConfigLoadStart event is triggered when the router begins to load a lazy-loaded module in Angular. This event is specific to lazy-loading and is not triggered for eagerly loaded modules.
When you configure a route to be lazy-loaded in Angular, the module associated with that route is loaded on-demand when the user navigates to that route. The RouteConfigLoadStart event is triggered when the router begins to load the module for that route.
you don’t need to explicitly mention RouteConfigLoadStart in the router configuration for lazy-loaded modules.
The RouteConfigLoadStart event is part of the Angular Router’s built-in event system and is automatically triggered when a lazy-loaded module is being loaded.
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