Contents hide 1) Router Change Events 1.1) List of Router Events: 2) Router Events implementation: 3) Unit Testing for Router Events In this tutorial we will see how to detect the changes of the routes made by the angular router change events. Also, we will see how to cover the unit test cases for events by making the mock class for the angular router event.Router Change EventsDetecting Route state changes can be done by subscribing to the router and listening to the events being emitted. In the example below, you will see all the router events that you can listen to in Angular 8.List of Router Events:EventsDescription NavigationStart Navigation started. RoutesRecognizedRouter parses the URL and the routes are recognized. RouteConfigLoadEndRoute has been lazy loaded. NavigationEndNavigation Ended Successfully. NavigationCancelNavigation is canceled as the Route-Guard returned false during navigation. NavigationErrorNavigation fails due to an unexpected error.Router Events implementation:app.component.ts import { Component } from '@angular/core'; import { Router, Event, NavigationStart, RoutesRecognized, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router'; @Component({ selector: 'demo-app', template: `<router-outlet></router-outlet>` }) export class DemoAppComponent { constructor(private router: Router) { router.events.subscribe( (event: Event) => if (event instanceof NavigationStart) { // Navigation started. console.log(event.url); } else if (event instanceof RoutesRecognized) { // Router parses the URL and the routes are recognized. } else if (event instanceof RouteConfigLoadStart) { // Before the Router lazyloads a route configuration. } else if (event instanceof RouteConfigLoadEnd) { // Route has been lazy loaded. } else if (event instanceof NavigationEnd) { // Navigation Ended Successfully. console.log(event.url); } else if (event instanceof NavigationCancel) { // Navigation is canceled as the Route-Guard returned false during navigation. } else if (event instanceof NavigationError) { // Navigation fails due to an unexpected error. console.log(event.error); } }); } } Note: Events are triggered where ever console.log() is mentioned.Unit Testing for Router EventsFor the unit testing we will create a mock class for a sencario of NavigationStart app.component.spec.ts import { AppComponent } from './app.component'; import { TestBed, ComponentFixture, async } from '@angular/core/testing'; import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { Router, NavigationStart } from '@angular/router'; import { Observable, Observer } from 'rxjs'; // mock router service class MockServices { public events = Observable.create((observer: Observer<any>) => { observer.next(new NavigationStart(0, 'http://127.0.0.1:3001/dummy/url', 'imperative')); return observer; }); } describe('AppComponent', () => { let instance: AppComponent; let fixture: ComponentFixture<appcomponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], imports: [ ], providers: [ { provide: Router, useClass: MockServices }, ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) .compileComponents(); })); }); similarly you can also cover other angular router events as per the scenario.Get More tutorials on Angular 8+Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblrRelatedTags: Angular 7, Angular Router, navigation events, Router Events