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

Steps for creating a functional counter in AngularJS

An error was encountered due to an unknown provider: storeProvider. This occurred in relation to Auth0 within an AngularJS application

Issue: Unhandled promise rejection: SecurityError: To use screen.orientation.lock(), the page must be in fullscreen mode

Does Transclude eliminate tr and td elements from the content?

What is the best way to remove all validators from a different component in Angular 7 using reactive forms?

Dealing with errors effectively in AngularJS $http requests

NX - A comprehensive UI library featuring Storybook integration and individually exported components

Angular 6 Error: Unable to access the 'username' property because it is undefined

Type Assertion for Optional Values in TypeScript

Translate array into object with correct data types (type-specific method)

Tips for accessing a constant service instance in Angular

Angular Universal causing issues with updating the DOM component

After defining the NEXTAUTH_URL and NEXTAUTH_SECRET variables, the getServerSession(authOptions) function in NextJS is returning null

Instructions on extracting a JWT token from an external API for user authentication, followed by saving the user's name and email address into the database

How do I designate the compiled migration location?

issue with ng2-semantic-ui: remote options not properly loading in select

Typescript does not allow for extending an interface with a data property even if both interfaces have the same data type

Filter ng-repeat according to the user's choice

Is it possible to integrate a backbone model with Angular?

Using AngularJS to prevent HTML injection in input fields