Category: Angular

Example 1:

import { Router, NavigationEnd } from '@angular/router';

@Component({
  // ...
})
export class MyComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        // Navigation ended successfully.
        console.log('Navigation ended');
      }
    });
  }
}

The Router class has an events property that is an Observable that you can subscribe to. This Observable will emit a variety of events related to the router, such as NavigationStart, NavigationEnd, NavigationCancel, and NavigationError.

In this example, we are only interested in the NavigationEnd event, which is emitted when the router has successfully completed a navigation. When this event is emitted, we log a message to the console.

You can use this same technique to listen for other router events and take action based on them. For example, you might want to display a loading spinner while a navigation is in progress, or display an error message if a navigation fails.

Example 2:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } 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 NavigationEnd) {
        // Perform some action here when the route changes
      }
    });
  }
}

In this example, the AppComponent is subscribing to the router.events observable, which emits an event every time the route changes. The component checks if the event is an instance of NavigationEnd, which indicates that the route has finished loading. Then, the component can perform some action, such as calling a service to fetch data or updating a component’s state.
You can also use other router events, such as NavigationStart (emitted when a route change starts) and NavigationError (emitted when there is an error during the route change). You can find a full list of router events and their descriptions in the Angular documentation.

Example 3:

import { Router, NavigationEnd } 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() {
    // subscribe to router events and perform some action when a route is activated or deactivated
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        // do something with the route change event
      }
    });
  }
}

In this example, the AppComponent is subscribing to the router’s events observable and performing some action when the NavigationEnd event is emitted. You can use this technique to perform any action you want when a route is activated or deactivated. For example, you might want to display a loading indicator while a route is being activated, or log the current route when it is deactivated.