Router Events Simplified

RouterEvents is a utility service for filtering specific router events and reacting to them. Please see this page in Angular docs for available router events.

Benefit

You can use router events directly and filter them as seen below:

import {
  NavigationEnd,
  NavigationError,
  NavigationCancel,
  Router,
} from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable()
class SomeService {
  navigationFinish$ = this.router.events.pipe(
    filter(
      event =>
        event instanceof NavigationEnd ||
        event instanceof NavigationError ||
        event instanceof NavigationCancel,
    ),
  );
  /* Observable<Event> */

  constructor(private router: Router) {}
}
JavaScript

However, RouterEvents makes filtering router events easier.

import { RouterEvents } from '@abp/ng.core';

@Injectable()
class SomeService {
  navigationFinish$ = this.routerEvents.getNavigationEvents('End', 'Error', 'Cancel');
  /* Observable<NavigationCancel | NavigationEnd | NavigationError> */

  constructor(private routerEvents: RouterEvents) {}
}
JavaScript

RouterEvents also delivers improved type-safety. In the example above, navigationFinish$ has inferred type of Observable<NavigationCancel | NavigationEnd | NavigationError> whereas it would have Observable<Event> when router events are filtered directly.

Usage

You do not have to provide RouterEvents at the module or component level, because it is already provided in root. You can inject and start using it immediately in your components.

How to Get Specific Navigation Events

You can use getNavigationEvents to get a stream of navigation events matching given event keys.

import { RouterEvents } from '@abp/ng.core';
import { merge } from 'rxjs';
import { mapTo } from 'rxjs/operators';

@Injectable()
class SomeService {
  navigationStart$ = this.routerEvents.getNavigationEvents('Start');
  /* Observable<NavigationStart> */

  navigationFinish$ = this.routerEvents.getNavigationEvents('End', 'Error', 'Cancel');
  /* Observable<NavigationCancel | NavigationEnd | NavigationError> */

  loading$ = merge(
    this.navigationStart$.pipe(mapTo(true)),
    this.navigationFinish$.pipe(mapTo(false)),
  );
  /* Observable<boolean> */

  constructor(private routerEvents: RouterEvents) {}
}
JavaScript

How to Get All Navigation Events

You can use getAllNavigationEvents to get a stream of all navigation events without passing any keys.

import { RouterEvents, NavigationStart } from '@abp/ng.core';
import { map } from 'rxjs/operators';

@Injectable()
class SomeService {
  navigationEvent$ = this.routerEvents.getAllNavigationEvents();
  /* Observable<NavigationCancel | NavigationEnd | NavigationError | NavigationStart> */

  loading$ = this.navigationEvent$.pipe(
    map(event => event instanceof NavigationStart),
  );
  /* Observable<boolean> */

  constructor(private routerEvents: RouterEvents) {}
}
JavaScript

How to get Current and Previous Navigation

You can use previousNavigation and currentNavigation properties to retrieve navigations in a reactive way.

previousNavigation: Signal<string>;
currentNavigation: Signal<string>;
TypeScript
import { RouterEvents } from "@abp/ng.core";

@Injectable()
class SomeService {
  readonly routerEvents = inject(RouterEvents);

  someAction() {
    const previousNavUrl = this.routerEvents.previousNavigation();
    if (previousNavUrl) {
      // perform some action
    }
  }
}
TypeScript

How to Get Specific Router Events

You can use getEvents to get a stream of router events matching given event constructors.

import { RouterEvents } from '@abp/ng.core';
import { ActivationEnd, ChildActivationEnd } from '@angular/router';

@Injectable()
class SomeService {
  moduleActivation$ = this.routerEvents.getEvents(ActivationEnd, ChildActivationEnd);
  /* Observable<ActivationEnd | ChildActivationEnd> */

  constructor(private routerEvents: RouterEvents) {}
}
JavaScript

How to Get All Router Events

You can use getEvents to get a stream of all router events without passing any event constructors. This is nothing different from accessing events property of Router and is added to the service just for convenience.

import { RouterEvents } from '@abp/ng.core';
import { ActivationEnd, ChildActivationEnd } from '@angular/router';

@Injectable()
class SomeService {
  routerEvent$ = this.routerEvents.getAllEvents();
  /* Observable<Event> */

  constructor(private routerEvents: RouterEvents) {}
}
JavaScript

Contributors

Avatar hikalkan
Last updated: July 31, 2024 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

Real World Problems and Solutions with AI

27 Feb, 17:00
Online
Watch the Event
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book