Angular 11 Get Current Route Url Example

January 24, 2021 XpertPhp

In this article, We will explain to you how to get the current route URL in angular 11(Angular 11 Get Current Route Url Example). so we will give you a simple example of angular get current route url.

There are many types of example through you can get current route URL. If you want the current route URL or path then you can use the two ways, such as Window Location and Router Url. Which we will explain this to you with an example. so you can see our example.

Using Window Location

In this example, we can easily get the current route Url using the window location in angular. so you can see examples.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor() { }

  ngOnInit() {
  
    console.log( window.location.href);

  }
}

import { Component } from '@angular/core';

import { Router } from '@angular/router';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor() { }

ngOnInit() {

console.log( window.location.href);

}

Using Router Url

In this example, we can easily get the current route Url using the router URL in angular. so here we are using the router library for that and you can see examples.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})

export class AppComponent {

  constructor(private router: Router) { }

  ngOnInit() {
  
    console.log(this.router.url);

  }
}