Angular Router Event Name

Question

The Angular(2+) router has an events property that is a rxjs subject.

Once subscribed, you are able to listen for events like:

router.events.subscribe((event: Event) => { console.log(event) });

but the problem is you have no way to obtain the event type since it listens for all events. A hacky solution is you can inspect the constructor name of the event like:

router.events.subscribe((event: Event) => {
  if(event.constructor.name === 'NavigationStart') {
    loadingService.start();
  } else if(event.constructor.name === 'NavigationEnd') {
    loadingService.complete();
    drawerService.destroyAll();
  }
});

I was curious if there was a better way to accomplish this?

score 1 · Accepted Answer · edited May 23 '17 at 11:46

1

Event is only the base class.

The concrete event values are one of

NavigationStart
NavigationEnd
NavigationCancel
NavigationError
RoutesRecognized

You can for example use:

constructor(router:Router) {
  router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      // You only receive NavigationStart events
    });

See also How to detect a route change in Angular 2?

edited May 23 '17 at 11:46

Community

1
1

answered Mar 14 '17 at 13:13

Günter Zöchbauer

623,577
216
2,003
1,567

1

Thanks so much! PR'd this back to the docs too! https://github.com/angular/angular/pull/15142 – amcdnl Mar 14 '17 at 13:24
The best form of contributing :) – Günter Zöchbauer Mar 14 '17 at 13:25

score 0 · Answer 2 · answered Nov 16 '20 at 19:02

If you install @bespunky/angular-zen you could extend RouteAware and create an event handler method named onNavigationEnd like so:

import { Component                                        } from '@angular/core';
import { NavigationStart, NavigationEnd, RoutesRecognized } from '@angular/router';
import { RouteAware                                       } from '@bespunky/angular-zen/router-x';

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent extends RouteAware
{
    // ✨ Any router event can have a handler method.
    // See https://angular.io/guide/router#router-events for a complete list of angular's router events.

    // ✨ Use `this.router` to access the router
    // ✨ Use `this.route` to access the activated route
    // ✨ Use `this.componentBus` to access the RouterOutletComponentBus service
    
    protected onNavigationStart(event: NavigationStart): void
    {
        console.log(`Navigation started for: ${event.url}`);
    }

    protected onRoutesRecognized(event: RoutesRecognized): void
    {
        console.log('Recognized routes.');
    }
    
    protected onNavigationEnd(event: NavigationEnd): void
    {
        console.log(`Navigation ended for: ${event.url}`);
    }
}

Here's a live example

The library is open source and you can install it like this:

npm install @bespunky/angular-zen

Angular Router Event Name

2 Answers2

Linked