How to get current route URL in Angular

get current route Url in Angular


Steps to get current route URL in Angular.

  1. Import Router,NavigationEnd from ‘@angular/router’ and inject in the constructor.
  2. Subscribe to the NavigationEnd event of the router.
  3. Get the current route url by accessing NavigationEnd’s url property.

Now we will take an example and understand it further.

I have created an Angular app which contains three routes. About,Service and Dashboard.

import { Component } from '@angular/core';
import { Router,NavigationEnd  } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
  name = 'Get Current Url Route Demo';
  currentRoute: string;

  constructor(private router: Router){
    console.log(router.url);
    
    router.events.filter(event => event instanceof NavigationEnd)
          .subscribe(event => 
           {
              this.currentRoute = event.url;          
              console.log(event);
           });
    }
}

I have created a variable called currentRoute, to display current router url value in the component HTML file.

In the subscribe event of NavigationEnd, I am updating currentRoute value.

<ul>    
  <li routerLinkActive="active">
     <a [routerLink]="['/about']">About</a>
  </li>
  <li routerLinkActive="active">
     <a [routerLink]="['/service']">Service</a>
  </li>
  <li routerLinkActive="active">
     <a [routerLink]="['/dashboard']">Dashboard</a>
  </li>
</ul>

  The current Route Is {{currentRoute}}

  <router-outlet></router-outlet>

Here is the demo.

You might get current route by accessing router.url as well.

But If you are navigating the routes with Hash location strategy, the router.url is always return “/”.

So it’s advisable to listen for NavigationEnd event of router to get the current route url in Angular.

NavigationEndEvent

NavigationEndEvent


☝ ✍ Angular Wiki ✍☝
Get a short & sweet Angular tutorials delivered to your inbox every couple of days. No spam ever. Unsubscribe any time.
Avatar
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.

Next
Previous