Finding the the current route or URL in Angular is one of the common requirements in an App. There are many ways by which you can get a current Route or URL in Angular. You can use the router service, location service or window object to get the path. You can also listen to changes to URL using the router event or URL change event of the location service.
Table of Contents
Using Router.url
Inject the Router and use the URL property.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ template: `<h1>Dashboard Component</h1>`, }) export class DashboardComponent { title = ''; constructor(private router: Router) { console.log(this.router.url) } } |
Subscribe to Router Events
Subscribe to the NavigationStart Router Event and use the url property of the NavigationEvent. By subscribing to the event, you will always
Do not forget to unsubscribe, the subscription when the component is destroyed. Not doing so will lead to a memory leak as the subscription will keep running.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | import { Component, OnDestroy} from '@angular/core'; import { Router,NavigationStart, Event as NavigationEvent } from '@angular/router'; @Component({ selector: 'app-admin', templateUrl: './admin.component.html', styleUrls: ['./admin.component.css'] }) export class AdminComponent implements OnDestroy { event$ constructor(private router: Router) { this.event$ =this.router.events .subscribe( (event: NavigationEvent) => { if(event instanceof NavigationStart) { console.log(event.url); } }); } ngOnDestroy() { this.event$.unsubscribe(); } } |
The route change even fires, only when the route changes. It won’t fire when the app starts for the first time.
Using Location Service
Import Location Service from the @angular/common. And use the Location.path() to get the current URL.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { Component} from '@angular/core'; import { Location } from '@angular/common'; @Component({ selector: 'app-admin', templateUrl: './admin.component.html', styleUrls: ['./admin.component.css'] }) export class AdminComponent implements OnDestroy { constructor(private Location:Location) { console.log(this.Location.path()) } } |
Listen to Location Change
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { Component, OnDestroy } from '@angular/core'; import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router'; import { Location } from '@angular/common'; @Component({ selector: 'app-admin', templateUrl: './admin.component.html', styleUrls: ['./admin.component.css'] }) export class AdminComponent implements OnDestroy { event$ constructor(private location: Location) { this.event$=location.onUrlChange((val) => { console.log('AdminComponent '+ val) }) } ngOnDestroy() { this.event$.unsubscribe() } } |
Using Window
You can also use the window object to get the path. But remember that it works only if the app is using the browser. If you using Server Side Rending using Angular Universal then this will not work.
1 2 3 | window.location.pathname |
thanks! that was clean and helpful !
thank you. this really helped me 🙂
Great, Thanks for sharing this….
I guess
in
Listen to Location Change—section
below lines do not make any sense
ngOnDestroy() {
this.event$.unsubscribe()
}
This is to stop listening to url changes when the component is destroyed.