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 Events Detecting 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: Events Description NavigationStart Navigation started. RoutesRecognized Router parses the URL and the routes are recognized. RouteConfigLoadEnd Route has been lazy loaded. NavigationEnd Navigation Ended Successfully. NavigationCancel Navigation is canceled as the Route-Guard returned false during navigation. NavigationError Navigation 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 Events For 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:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Angular 7, Angular Router, navigation events, Router Events