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.

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.

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 observable.

The 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.


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

5 thoughts on “Angular Router Events”

  1. 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”

  2. ‘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.

  3. 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?

Leave a Comment

Your email address will not be published. Required fields are marked *

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

Scroll to Top