Router Events In Angular

The Code Points June 17, 2022 0

In this article, We will learn what router events are and how to listen to them using Example. When the Angular Router moves from one route to another, it triggers events. It generates a variety of events, including NavigationStart, NavigationEnd, NavigationCancel, NavigationError, ResolveStart, and so on. You can listen to these events to learn when the route's status changes. Route change start (NavigationStart) and route change end (NavigationEnd) are two useful events ( NavigationEnd).

Router Events

The Angular Routers fire a series of events, starting with when the navigation starts (NavigationStart) and ending with when the navigation ends successfully (NavigationEnd). It is triggered when the user cancels the navigation (NavigationCancel) or when there is an error in the navigation (NavigationError) ( NavigationError). After the lazy loaded modules are about to load and when they have finished loading, the Events are triggered. They occur before and after guards such as canActivate and canActivateChild. Before and after Angular runs the Route Resolvers, events fire.

The Angular Router fires a number of events, which are listed below.

Router Event	The Event was triggered when
NavigationStart	The navigation is tracked by the Angular router.
RouteConfigLoadStart	the Router lazy loads a route configuration.
RouteConfigLoadEnd	A route configuration is loaded slowly by the Router.
RoutesRecognized	A route configuration is loaded slowly by the Router.
GuardsCheckStart	The Guards phase of routing is started by the Router.
ChildActivationStart	The Router starts activating the children of a route.
ActivationStart	A route is activated by the Router.
GuardsCheckEnd	The Router successfully completes the Guards phase of routing.
ResolveStart	The Resolve phase of routing is started by the Router.
ResolveEnd	The Router successfully completes the Resolve phase of routing.
ChildActivationEnd	The Router has completed the activation of a route's children.
ActivationEnd	The Router completes the activation of a route.
NavigationEnd	The navigation is complete.
NavigationCancel	The navigation has been disabled. This occurs as a result of a Route Guard returning false while navigating.
NavigationError	An unforeseen error causes navigation to fail.
Scroll	A scrolling event is represented by this event.

How to Listen to Router Events

To begin, we must import the event that we wish to listen to. NavigationStart is imported in the example below. The NavigationEvent and router must also be imported.

import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router';

Inject the Router into the constructor as well.

  

constructor(private router:Router) { 
}

Finally, by subscribing to the router, you can listen to occurrences. observable events

When the route changes, the router. events is an Observable that is triggered. In the callback, we get NavigationEvent as an argument. To determine the type of event that occurred, we examine the NavigationEvent instance.

this.router.events
  .subscribe(
    (event: NavigationEvent) => {
      if(event instanceof NavigationStart) {
        console.log(event);
      }
    })

Alternatively, as illustrated below, you can use the rxjs filter operator to filter out the appropriate events.

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);
  }
)

Conclusion

The Router events allow us to monitor changes in the router state and perform custom logic. When the user navigates from one route to another, one of the use case possibilities is to show the loading indicator. To achieve this, you can listen to the NavigationStart and NavigationEnd events.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.