How To Get The Current Route URL In Angular

The Code Points August 07, 2022 0

One of the common requirements in an app is to find the current route or URL in Angular. In Angular, there are numerous ways to obtain the current Route or URL. To obtain the path, use the window object, location service, or router service. Using the location service's router event or URL change event, you can additionally keep track of URL changes.

Using Router.url

Use the URL property and inject the Router.

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

Use the URL property of the NavigationEvent and subscribe to the NavigationStart Router Event. Subscribing to the event ensures that you'll always

When the component is destroyed, remember to cancel the subscription. Failure to do so will result in a memory leak because the subscription will continue to operate.

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();
  }
}

Only when the path changes do the route change even ignite. When the app launches for the first time, it won't fire.

Using Location Service

Location Service should be imported from @angular/common. And to obtain the current URL, use Location.path().

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

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

The window object can also be used to obtain the route. But keep in mind that it only functions while the app is using the browser. This won't work if you're using Angular Universal and Server Side Rendering.

window.location.pathname

Conclusion

In this article, we learned about how to get the current route URL In angular.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.