In Angular7, you can subscribe to router to detect the changes. The subscription for router events would be as below,
1 | this.router.events.subscribe((event: Event) => {}) |
Let’s take a simple component to detect router changes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import { Component } from '@angular/core'; import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router'; @Component({ selector: 'app-root', template: `<router-outlet></router-outlet>` }) export class AppComponent { constructor(private router: Router) { this.router.events.subscribe((event: Event) => { if (event instanceof NavigationStart) { // Show loading indicator and perform an action } if (event instanceof NavigationEnd) { // Hide loading indicator and perform an action } if (event instanceof NavigationError) { // Hide loading indicator and perform an action console.log(event.error); // It logs an error for debugging } }); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
