Listening for Angular 2 router events

Question

Listening for Angular 2 router events

How can I detect state changes in Angular 2 router?

In Angular 1.x, I used the following event:

$rootScope.$on('$stateChangeStart',
    function(event,toState,toParams,fromState,fromParams, options){ ... })

In Angular 2, using the window.addEventListener("hashchange") eventlistener does not work as expected when changing state programmatically; it only triggers on browser history back function.

To listen for state changes, use the router.subscribe() function like this:

import {Injectable} from 'angular2/core';
import {Router} from 'angular2/router';

@Injectable()
export class SubscribeService {
constructor (private _router: Router) {
this._router.subscribe(val => {
console.info(val, '<-- subscribe func');
})
}
}

Inject the service into a component that is initialized through routing:

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
selector: 'main',
templateUrl: '../templates/main.html',
providers: [SubscribeService]
})
export class MainComponent {
constructor (private subscribeService: SubscribeService) {}
}

I have injected this service into other components as well, but when I change state, the console.info() in the service doesn't seem to be working. What could I be doing wrong?

javascript angular typescript angular2-routing

Answer 1

Answer №1

Setting up a new router

constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

Implementing with the old router

Using dependency injection to subscribe to route change events

import {Router} from 'angular2/router';

class MyComponent {
  constructor(router:Router) {
    router.subscribe(...)
  }
}

A Friendly Reminder

When using the new router, make sure to import NavigationStart from the @angular/router module

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

Otherwise, the instanceof check will fail and you'll see an error message saying NavigationStart is not defined.

For more information

Visit Angular Official Documentation for Router Class
How to detect a route change in Angular 2?

Answer 2

Setting up a new router

constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

Implementing with the old router

Using dependency injection to subscribe to route change events

import {Router} from 'angular2/router';

class MyComponent {
  constructor(router:Router) {
    router.subscribe(...)
  }
}

A Friendly Reminder

When using the new router, make sure to import NavigationStart from the @angular/router module

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

Otherwise, the instanceof check will fail and you'll see an error message saying NavigationStart is not defined.

For more information

Visit Angular Official Documentation for Router Class
How to detect a route change in Angular 2?

Answer 3

Answer №2

Filtering events can be done using the filter() method.

Instead of simply using

filter(e => e is NavigationEnd)

, a better approach is to include a 'type guard' in the filter() function like this:

 filter((e): e is NavigationEnd => e instanceof NavigationEnd),

This setup includes two components:

e is NavigationEnd defines the assertion for the function (this TypeScript syntax does not carry over to JavaScript)
e instanceof NavigationEnd actually checks the type at runtime

The benefit of this method is that downstream operators, such as map, will recognize the type as

NavigationEnd</code instead of just <code>Event

without the type guard.

If you only need to verify one event type, this is the most efficient way to do so. It also seems to be required in strict mode to avoid compiler issues.

https://i.stack.imgur.com/uZiNj.png

Answer 4

Filtering events can be done using the filter() method.

Instead of simply using

filter(e => e is NavigationEnd)

, a better approach is to include a 'type guard' in the filter() function like this:

 filter((e): e is NavigationEnd => e instanceof NavigationEnd),

This setup includes two components:

e is NavigationEnd defines the assertion for the function (this TypeScript syntax does not carry over to JavaScript)
e instanceof NavigationEnd actually checks the type at runtime

The benefit of this method is that downstream operators, such as map, will recognize the type as

NavigationEnd</code instead of just <code>Event

without the type guard.

If you only need to verify one event type, this is the most efficient way to do so. It also seems to be required in strict mode to avoid compiler issues.

https://i.stack.imgur.com/uZiNj.png

Answer 5

Answer №3

To check for the type of an event, you can employ the instanceof method just like what was mentioned by @GünterZöchbauer

this.router.events.subscribe(event => {
  if(event instanceof NavigationStart) {
    // perform a specific action...
  }
}

Alternatively, you have the option to take a more cautious approach, however, keep in mind that the constructor name may be altered while the function is still operational!

this.router.events.subscribe(event => {
  if(event.constructor.name === "NavigationStart") {
    // perform a specific action...
  }
});

Answer 6

To check for the type of an event, you can employ the instanceof method just like what was mentioned by @GünterZöchbauer

this.router.events.subscribe(event => {
  if(event instanceof NavigationStart) {
    // perform a specific action...
  }
}

Alternatively, you have the option to take a more cautious approach, however, keep in mind that the constructor name may be altered while the function is still operational!

this.router.events.subscribe(event => {
  if(event.constructor.name === "NavigationStart") {
    // perform a specific action...
  }
});

Answer 7

Answer №4

Directly from the official documentation

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

this.router.events.pipe(
  filter((e: any): e is RouterEvent => e instanceof RouterEvent)
).subscribe((evt: RouterEvent) => {
  if (evt instanceof NavigationEnd) {
    console.log(evt.url)
  }
})

While the docs suggest using the code filter((e: Event), I recommend using filter((e: any) to avoid linting errors in WebStorm.

Answer 8

Directly from the official documentation

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

this.router.events.pipe(
  filter((e: any): e is RouterEvent => e instanceof RouterEvent)
).subscribe((evt: RouterEvent) => {
  if (evt instanceof NavigationEnd) {
    console.log(evt.url)
  }
})

While the docs suggest using the code filter((e: Event), I recommend using filter((e: any) to avoid linting errors in WebStorm.

Answer 9

Answer №5

const { BrowserRouter as Router, Route, Switch } = 'react-router-dom';
constructor(props) {
  super(props);
  
  this.routeEvent(this.props.history);

}
routeEvent(history){
  history.listen((location, action) => {
    console.log('Location:', location.pathname);
    console.log('Action:', action);
  });
}

Answer 10

const { BrowserRouter as Router, Route, Switch } = 'react-router-dom';
constructor(props) {
  super(props);
  
  this.routeEvent(this.props.history);

}
routeEvent(history){
  history.listen((location, action) => {
    console.log('Location:', location.pathname);
    console.log('Action:', action);
  });
}

Answer 11

Answer №6

The events in the Angular 2 router have various classes, and when subscribed to the router.events observable, you can receive instances of NavigationEnd, NavigationCancel, NavigationError, or NavigationStart. The one that will actually initiate a routing update is NavigationEnd.

It's best to avoid using instanceof or event.constructor.name because minification can cause class names to be mangled which may lead to incorrect behavior.

Instead, you can utilize the isActive function of the router. You can find more information about it here: https://angular.io/docs/ts/latest/api/router/index/Router-class.html

this.routerEventSubscription = this._router.events.subscribe((event: any) => {
  if (this._router.isActive(events.url, false)) { 
    // Returns true if the url route is active
  }
}

Answer 12

The events in the Angular 2 router have various classes, and when subscribed to the router.events observable, you can receive instances of NavigationEnd, NavigationCancel, NavigationError, or NavigationStart. The one that will actually initiate a routing update is NavigationEnd.

It's best to avoid using instanceof or event.constructor.name because minification can cause class names to be mangled which may lead to incorrect behavior.

Instead, you can utilize the isActive function of the router. You can find more information about it here: https://angular.io/docs/ts/latest/api/router/index/Router-class.html

this.routerEventSubscription = this._router.events.subscribe((event: any) => {
  if (this._router.isActive(events.url, false)) { 
    // Returns true if the url route is active
  }
}

Answer 13

Answer №7

To enable route tracing in Angular 2, navigate to the file "app.modules.ts" and locate the 'imports' section.

RouterModule.forRoot(
      appRoutes,
      { 
         enableTracing: true
      }
)

When 'enableTracing' is set to true, routeEvents will be displayed in the console. Conversely, setting it to false will hide routeEvents in the console.

Answer 14

To enable route tracing in Angular 2, navigate to the file "app.modules.ts" and locate the 'imports' section.

RouterModule.forRoot(
      appRoutes,
      { 
         enableTracing: true
      }
)

When 'enableTracing' is set to true, routeEvents will be displayed in the console. Conversely, setting it to false will hide routeEvents in the console.

Answer 15

Answer №8

Using @myangularpluginsite, simplifying this task has been made much easier...

All you need to do is extend the RouteAware class and create a method called on<EventType>():

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

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent extends RouteAware
{
    // ✨ You can handle any router event with a handler method.
    // Check https://angular.io/guide/router#router-events for a full 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}`);
    }
}

For more information, refer to this answer:

Answer 16

Using @myangularpluginsite, simplifying this task has been made much easier...

All you need to do is extend the RouteAware class and create a method called on<EventType>():

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

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent extends RouteAware
{
    // ✨ You can handle any router event with a handler method.
    // Check https://angular.io/guide/router#router-events for a full 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}`);
    }
}

For more information, refer to this answer:

Answer 17

Answer №9

For a comprehensive view of all state changes, it is recommended to extend the default RouterOutlet and incorporate your own logic in the 'activate' and 'deactivate' handlers.

import {Directive} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';

@Directive({
  selector: 'router-outlet'
})

export class MyOwnRouterOutlet extends RouterOutlet {
  ...

  activate() {
    console.log('Greetings from the updated router outlet!');
  }
}

Adapted from the example titled 'Custom Router Outlet' available at: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

Answer 18

For a comprehensive view of all state changes, it is recommended to extend the default RouterOutlet and incorporate your own logic in the 'activate' and 'deactivate' handlers.

import {Directive} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';

@Directive({
  selector: 'router-outlet'
})

export class MyOwnRouterOutlet extends RouterOutlet {
  ...

  activate() {
    console.log('Greetings from the updated router outlet!');
  }
}

Adapted from the example titled 'Custom Router Outlet' available at: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/

Listening for Angular 2 router events

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Adding a trailing slash to the URL in an Express server causes it to be appended

Exploring the Fusion of Different Styles in Material-UI Using React

Enable the feature for users to upload images to a specific folder within the Chrome extension without the need for

I am unable to utilize autocomplete with types that are automatically generated by Prisma

What is the reason behind TypeScript rejecting the syntax of checkbox input elements?

The signal property 'ɵunwrapWritableSignal' is not found on the specified type 'typeof import/node_modules/@angular/core/index")'

failure to render updated content after modification of variable

How can you notify a component, via a service, that an event has occurred using Subject or BehaviorSubject?

Implementing a Collapse and Expand All feature within an Accordion Component

When attempting to perform conditional rendering in React using a stateless functional component, I encounter an error stating "Unexpected token, expected ,"

Tips for effectively managing loading state within redux toolkit crud operations

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

Route Handler 13 is encountering difficulties in retrieving data from the body in the (app/api/auth) endpoint

Transferring data between various stages of the user interface

I am looking to efficiently store various pieces of data in a database by utilizing a singular variable through JS, PHP, and AJAX for streamlined processing and management

What is the best way to insert a button at the end of the last row in the first column and also at the

Getting the value of a variable within the scope of AngularJS can be achieved by utilizing

What methods can I utilize to expand the qix color library with personalized manipulation features?

How can I use JavaScript fetch to retrieve data from a JSON file based on a specific value?

I'm perplexed as to why my array remains empty despite assigning a value to it in my controller. (Just to clarify, I am working with AngularJS, not Angular)