Detect Route Changes in Angular

Introduction

In this article, we will learn how to detect route changes in Angular Applications.

Create an Angular Project

Create an Angular project by using the following command.

ng new angapp

Now open the app.component.ts file and import the route from @angular/router.

import {
  Router, Event, NavigationStart,
  NavigationEnd, NavigationCancel, NavigationError, ChildActivationStart, Scroll
} from '@angular/router';

Add the following code in the app.component.ts file.

import { Component, OnInit } from '@angular/core';
import { } from '@angular/common/http'
import {
  Router, Event, NavigationStart,
  NavigationEnd, NavigationCancel, NavigationError, ChildActivationStart, Scroll
} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationStart) {
        // Navigation is starting
        console.log('Route change detected');
      }
      else if (event instanceof NavigationEnd) {
        // Navigation End
        console.log(event);
      }
      else if (event instanceof ChildActivationStart) {
        // ChildActivationStart router begins activating a route's children.
        console.log('ChildActivationStart --- ', event.toString());
      }
      else if (event instanceof NavigationCancel) {
        //When navigation is canceled.
        console.log('NavigationCancel --- ', event.url);
      }
      else if (event instanceof NavigationError) {
        // Error Show
        console.log(event.error);
      }
      else if (event instanceof Scroll) {
        // When the user scrolls.
        console.log('Scroll --- ', event.position);
      }
    });
  }
}

Now, create three components using the following command to add routes in the application.

ng g c actionmenu
ng g c searchlist
ng g c truncateapp

Open the app.routing.module.ts file and add the following code.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TruncateappComponent } from './truncateapp/truncateapp.component';
import { SearchlistComponent } from './searchlist/searchlist.component';
import { ActionmenuComponent } from './actionmenu/actionmenu.component';

const routes: Routes = [
  { path: 'Truncateapp', component: TruncateappComponent },
  { path: 'Searchlist', component: SearchlistComponent },
  { path: 'Actionmenu', component: ActionmenuComponent },


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now open the app.component.html file and add the following code. 

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active" routerLinkActive="active">
        <a href="#">Home</a>
      </li>
      <li><a [routerLink]="['/Searchlist']">Searchlist</a></li>
      <li> <a [routerLink]="['/Truncateapp']">Truncateapp</a></li>
      <li> <a [routerLink]="['/Actionmenu']">Action</a></li>
    </ul>
  </div>
</nav>
<router-outlet></router-outlet>

Now run the application using npm start and check the result.