Angular Router Events

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.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

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 EventThe Event triggered when
NavigationStartthe Angular router stats the navigation.
RouteConfigLoadStartthe Router lazy loads a route configuration.
RouteConfigLoadEndafter a route has been lazy-loaded.
RoutesRecognizedthe Router parses the URL and the routes are recognized.
GuardsCheckStartthe Router begins the Guards phase of routing.
ChildActivationStartthe Router begins activating a route's children.
ActivationStartthe Router begins activating a route.
GuardsCheckEndthe Router finishes the Guards phase of routing successfully.
ResolveStartthe Router begins the Resolve phase of routing.
ResolveEndthe Router finishes the Resolve phase of routing successfully.
ChildActivationEndthe Router finishes activating a route's children.
ActivationEndthe Router finishes activating a route.
NavigationEndnavigation ends successfully.
NavigationCancelnavigation is canceled. This is due to a Route Guard returning false during navigation.
NavigationErrornavigation fails due to an unexpected error.
ScrollAn 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.

And inject the Router in the constructor

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.

Or you can make use of the rxjs filter operator to filter out the required events as shown below.

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

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top