What is the Angular2 equivalent of the AngularJS $routeChangeStart event?

Question

What is the Angular2 equivalent of the AngularJS $routeChangeStart event?

During our time working with AngularJS, we utilized the $routeChangeStart/End event in the $rootScope to monitor changes in the route object. What is the equivalent method for monitoring route changes in Angular2?

How can we achieve the same functionality as the code snippet below in Angular2?

 $scope.$on('$routeChangeStart', function (scope, next, current) {
        //do what you want
      });

I came across some discussions on this topic but didn't find detailed information, prompting me to ask a new question.

angular2 $routeChangeStart , $routeChangeSuccess ,$routeChangeError

angularjs angular typescript events routes

Answer 1

Answer №1

If you want to monitor the events of the router, you can do so by following these steps:

import {
  Router, ActivatedRoute,
  NavigationEnd, NavigationStart,
  NavigationError, NavigationCancel,
} from '@angular/router';

// Within the constructor method of an Angular component
constructor(
    private _router: Router,
  ) {
this._router.events
          .filter(event => event instanceof NavigationStart)
          .subscribe(event => {
            console.log("New route");
          });
 }

UPDATE: Upon further inspection of the Angular documentation, it appears that these events are more closely related to the resolution or result of a guard in Angular 2.

Answer 2

If you want to monitor the events of the router, you can do so by following these steps:

import {
  Router, ActivatedRoute,
  NavigationEnd, NavigationStart,
  NavigationError, NavigationCancel,
} from '@angular/router';

// Within the constructor method of an Angular component
constructor(
    private _router: Router,
  ) {
this._router.events
          .filter(event => event instanceof NavigationStart)
          .subscribe(event => {
            console.log("New route");
          });
 }

UPDATE: Upon further inspection of the Angular documentation, it appears that these events are more closely related to the resolution or result of a guard in Angular 2.

What is the Angular2 equivalent of the AngularJS $routeChangeStart event?

Answer №1

Similar questions

Is there possibly a problem with GridActionsCellItem and its props?

Display alternative navigation paths to the user in Angular that differ from the original routes

Can TypeScript be used to generate a union type that includes all the literal values from an input string array?

Ways to display additional information in typeahead using Angular JS

Personalize the appearance of autocomplete in Angular 2 using a dynamic <ng-content> tag

Exploring the World with AngularJS and Google Maps API through ngGeolocation

Looking to transform a timestamp such as "2021-07-18T9:33:58.000Z" into a more readable format like 18th July for the date or 9:33 am for the time using Angular?

Ways to compel $scope to re-compile its contents and re-establish directive links

Using SCSS variables in TypeScript inside a Vue project

ngRepeat does not completely refresh the DOM when dealing with a basic array

Can you explain the distinction between 'rxjs/operators' and 'rxjs/internal/operators'?

Obtaining the current domain within an Angular model (specifically an Angular service housing ajax calls) in order to construct the complete API URL for fetching data

The Enigma of AngularJS Coding

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

Unusual marker appearing on every page utilizing ionic v1 and angularjs

Ways to retrieve data from an Observable and save it in an Array categorized by a specific identifier

Error encountered while running npm build: Typescript issue within plotly.js/index.d.ts

Error in Angular 4: Unexpected 'undefined' provided instead of a stream

Multiple invocations of the callback function in an Angular5 template binding

The Angular filter is failing to display the category value