ItSolutionStuff.com

How to Get Current Route in Angular 18?

By Hardik Savani • July 24, 2024
Angular

In this post, we will learn angular 18 get current route. we will help you to give an example of angular 18 get current route path. It's a simple example of angular 18 get current route. If you have a question about how to get current route in angular 18 then I will give a simple example with a solution.

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

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

How to Integrate Google Maps in Angular 18?

Read Now →

Angular 18 Stripe Payment Integration Example

Read Now →

Angular 18 Login with Google Gmail Account Example

Read Now →

Angular 18 Pagination with NGX Pagination Example

Read Now →

Angular 18 HttpClient & Http Services Tutorial

Read Now →

Angular 18 RxJS Observable with Httpclient Example

Read Now →

How to Define Global Variables in Angular 18?

Read Now →

Angular 18 Template Driven Form with Validation Example

Read Now →

Angular 18 Multiple Image Upload Example Tutorial

Read Now →

Angular 18 File Upload Tutorial Example

Read Now →

Angular 18 Image Upload with Preview Example

Read Now →

Angular 18 Reactive Forms with Validation Example

Read Now →

How to Add Bootstrap 5 in Angular 18 Application?

Read Now →