Router Change Events In Angular 8+ Router Class

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:

Router Events implementation:

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

Unit Testing for Router Events

For the unit testing we will create a mock class for a sencario of NavigationStart

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.