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.
- Browser URL change can only be caused by 2 factors: Route change inside Angular2 or user manually type in new URL. You can subscribe to the former. The latter will reload the whole application and detecting it makes no sense.Harry Ninh– Harry Ninh2016-10-07 01:24:20 +00:00Commented Oct 7, 2016 at 1:24
- Thanks for your comment. The later case could also be coming from user clicking other external URL, or clicking on their browser's bookmarks bar. In my application, I need to catch this to present an Unsaved Changes confirmation dialog to user.Huy Pham– Huy Pham2016-10-09 23:45:49 +00:00Commented Oct 9, 2016 at 23:45
Add a comment |
3 Answers
Inject Location and use the onUrlChange event listener:
import { Location } from '@angular/common'; constructor(private location: Location) { location.onUrlChange(url => console.log(url)); } 
Comments
You can inject Location and subscribe to it
import { Location } from '@angular/common'; ... constructor(location:Location) { location.subscribe(val => console.log(val)); } As Harry mentioned. This only notifies about popState events (the router or similar code changing the URL)
answered Oct 7, 2016 at 5:19
Günter Zöchbauer
661k235 gold badges2.1k silver badges1.6k bronze badges
5 Comments
Huy Pham
Thanks. So there isn't any built-in way to catch all URL change then. not like:
$rootScope.$on('$stateChangeStart', () => {...}) in angular 1
peter70
please see here: stackoverflow.com/questions/33520043/…
Inigo
Property 'subscribe' does not exist on type 'Location'.Günter Zöchbauer
That was changed AFAIR.
BrowserLocation has it, but that was made private. developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… should work or if you use the Angular router, it allows to subscribe to changes as well (see link in the question).
Ena
I was getting "Property subscribe does not exist.." because I missed the correct import:
import {Location} from '@angular/common';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); }); } 