Router Events in Angular

Router events in Angular allow you to listen to specific events during the navigation lifecycle. This tutorial covers the basics of setting up and using router events effectively in your Angular applications.

Setting Up Router Events

To set up router events, you need to inject the Router service and subscribe to the events observable:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '
About Component
',
})
export class AboutComponent { }

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        console.log('Navigation Start');
      } else if (event instanceof NavigationEnd) {
        console.log('Navigation End');
      } else if (event instanceof NavigationCancel) {
        console.log('Navigation Cancelled');
      } else if (event instanceof NavigationError) {
        console.log('Navigation Error');
      } else if (event instanceof RoutesRecognized) {
        console.log('Routes Recognized');
      }
    });
  }
}

// app.component.html

Listening to Specific Events

Angular provides several router events you can listen to, such as NavigationStart, NavigationEnd, NavigationCancel, NavigationError, and RoutesRecognized. Here’s how you can handle these events:

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError, RoutesRecognized } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        console.log('Navigation Start');
      } else if (event instanceof NavigationEnd) {
        console.log('Navigation End');
      } else if (event instanceof NavigationCancel) {
        console.log('Navigation Cancelled');
      } else if (event instanceof NavigationError) {
        console.log('Navigation Error');
      } else if (event instanceof RoutesRecognized) {
        console.log('Routes Recognized');
      }
    });
  }
}

Key Points

Conclusion

Router events in Angular provide a powerful way to listen to and handle specific events during the navigation lifecycle. By understanding and using router events effectively, you can create dynamic and user-friendly applications with smooth navigation. Happy coding!