What is the Angular2 equivalent to an AngularJS $routeChangeStart?

Question

In AngularJS we were able to specify route change event to observe changes in route object using the $routeChangeStart/End event of the $rootScope. What is the equivalent of the route change event in Angular2?

how can we do this exact functionality of below code in Angular2

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

I got some disucussions here, But it don't have more details, So I asked a new question.

angular2 $routeChangeStart , $routeChangeSuccess ,$routeChangeError

Jota.Toledo · Accepted Answer · 2017-06-16T15:07:52.627

4

You can listen the events of the router by doing the following:

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

// constructor method of some angular element
constructor(
    private _router: Router,
  ) {
this._router.events
          .filter(event => event instanceof NavigationStart)
          .subscribe(event => {
            console.log("New route");
          });
 }

EDIT: Im not completely sure is that is actually what you need, after taking a closer look to the angularjs docs seems like those events are more related to the resolution/result of a guard in angular2

edited Jun 16 '17 at 15:07

answered Jun 16 '17 at 15:00

Jota.Toledo

27,293
11
59
73

also, you should enable events in the RouterModule.forRoot – Max Koretskyi Jun 16 '17 at 15:07
what do you mean? enableTracing? – Jota.Toledo Jun 16 '17 at 15:09
Not necessary, the events are triggered independent of that flag. That only logs the events information in the console – Jota.Toledo Jun 16 '17 at 15:11
ah, yeah, got confused :) – Max Koretskyi Jun 16 '17 at 15:12
when this method will be hit? routchangestart or end? – Ramesh Rajendran Jun 16 '17 at 15:20
The Router element emits a new event of type NavigationStart every time that the user try to navigates to a new route. NavigationEnd is emitted when the new route is valid. The docs are pretty clear, check them out :) – Jota.Toledo Jun 16 '17 at 15:26

What is the Angular2 equivalent to an AngularJS $routeChangeStart?

1 Answers1