How to detect URL change in angular 2?

Question

Route change can be detected using the router.events stream. (How to detect a route change in Angular 2?).

But I am not sure how to detect browser URL change.

Answer 1

You can achieve to subscribe to router events from your root file like this

constructor(private router: Router,
          private aRouter: ActivatedRoute) {
this.router.events.pipe(filter(e => e instanceof NavigationEnd))
.subscribe((s: NavigationEnd) => {
  //write your logic here
   console.log(s);
});
}

Answer 2

Inject Location and use the onUrlChange event listener:

import { Location } from '@angular/common';

constructor(private location: Location) {
  location.onUrlChange(url => console.log(url));
}