Angular Get Active Route URL Example

By Hardik Savani | January 28, 2020 | Category : Angular


Today, i will let you know how to get active route in angular application. we will see example of angular get active route name and url. we can easily get active route url in component angular.

Wr can easily get current active route in angular 6, angular 7, angular 8, angular 9 and angular 10 application.

we will use angular Router library to getting active route in component file. we can easily get active route path with Router.

We might be some time need to get active path or active router url in angular application. so if you need now then i will help you how you can get active url in angular. so you can see basic solution bellow:

You can get active route name like as bellow, i also written full example with output so, you can understand:

this.router.url;

window.location.href;

Now i will give you full example. you can write code on your component file as like bellow:

Component File

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

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

@Component({

selector: 'app-posts',

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

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

})

export class PostsComponent implements OnInit {

constructor(private router: Router) { }

ngOnInit() {

console.log(this.router.url);

console.log( window.location.href);

}

}

You can see output also.

Output:

/posts

http://localhost:4200/posts

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: