get current url angular

How to get current URL in Angular#

If you need to get the current URL in your Angular application, there are a few different ways to do it. Here are some options:

Using the Location Service#

You can use the built-in Location service in Angular to get information about the current URL. Here's how:

import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  selector: 'my-component',
  template: `
    Current URL: {{ currentUrl }}
  `,
})
export class MyComponent {
  currentUrl: string;

  constructor(private location: Location) {
    this.currentUrl = this.location.path();
  }
}

Here, we're injecting the Location service into our component's constructor and using its path() method to get the current URL. We're then binding that value to the currentUrl property of our component, which we can display in our template.

Using the Window object#

You can also get the current URL by accessing the window object directly. Here's how:

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

@Component({
  selector: 'my-component',
  template: `
    Current URL: {{ currentUrl }}
  `,
})
export class MyComponent {
  currentUrl: string;

  constructor() {
    this.currentUrl = window.location.href;
  }
}

Here, we're accessing the location.href property of the window object, which gives us the current URL. We're then binding that value to the currentUrl property of our component, which we can display in our template.

Using the Router Service#

If you're using Angular's built-in router, you can also get information about the current URL using the Router service. Here's how:

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

@Component({
  selector: 'my-component',
  template: `
    Current URL: {{ currentUrl }}
  `,
})
export class MyComponent {
  currentUrl: string;

  constructor(private router: Router) {
    this.currentUrl = this.router.url;
  }
}

Here, we're injecting the Router service into our component's constructor and using its url property to get the current URL. We're then binding that value to the currentUrl property of our component, which we can display in our template.