ItSolutionStuff.com

How to Get Current URL in Angular?

By Hardik Savani • May 2, 2024
Angular

Our leading topic is how to get current url in angular component. i will show you angular get current route url using router. we will get current url using angular router. you can easily get current url (route path) 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 url 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 url 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

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

Angular Material Input Box Example

Read Now →

How to Use Bootstrap Tabs with Angular?

Read Now →

How to use Bootstrap Modal in Angular?

Read Now →

File Upload with Angular Reactive Forms Example

Read Now →

Angular 9/8 Routing and Nested Routing Tutorial With Example

Read Now →

Angular Change Date Format in Component Example

Read Now →

Angular Font Awesome - How to install font awesome in Angular 9/8?

Read Now →

How to Create Custom Validators in Angular 9/8?

Read Now →

How to Create New Component in Angular 8?

Read Now →

Angular NgClass - How to Add Dynamic Class in Angular 10/9/8?

Read Now →

Reactive Form with Validation in Angular 8

Read Now →

Template Driven Forms Validation in Angular 9/8 Example

Read Now →

How to Add Bootstrap in Angular 8 | Install Bootstrap 4 in Angular 8

Read Now →