Angular 17: How to Get the Current Route with Examples

Learn how to get the current route in Angular 17 with simple and easy examples. This tutorial will show you how to use the ActivatedRoute and Router services to access the route information.

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

We might be some time need to get the current path or current router URL in the angular application. so if you need it now then I will help you how you can get the current URL in angular. so you can see the basic solution below:

You can get the current route name like as below, i also wrote 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';
import { CommonModule } from '@angular/common';
  
@Component({
  selector: 'app-favorite',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './favorite.component.html',
  styleUrl: './favorite.component.css'
})
export class PostsComponent {
  
  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

#angular