Angular Get Current Route Name Example
Here i can guide you how to get current route data in angular component. we will get angular current route name and url from component file. you can get current route path using angular router. you can easily get current route name in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17.
we will use angular Router library to getting current route in component file. we can easily get current route path with Router.
We might be some time need to get current path or current router url in angular application. so if you need now then i will help you how you can get current url in angular. so you can see basic solution bellow:
You can get current 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
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. 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, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- How to Use Bootstrap Popover in Angular?
- Multiple File Upload in Angular Tutorial
- Angular Get Active Route URL Example
- How to Get Current URL in Angular?
- Angular 9/8 Routing and Nested Routing Tutorial With Example
- Angular Change Date Format in Component Example
- Angular Font Awesome - How to install font awesome in Angular 9/8?
- How to Create Custom Validators in Angular 9/8?
- How to Create New Component in Angular 8?
- Angular NgClass - How to Add Dynamic Class in Angular 10/9/8?
- Reactive Form with Validation in Angular 8
- Template Driven Forms Validation in Angular 9/8 Example
- How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8
- How to Create Custom Pipe in Angular 9/8?