Get Current Route for Angular JS

In AngularJS (Angular 1), you can use the $location service to get information about the current route.

Code snippet :

// Assuming you have injected the $scope and $location services in your controller

$scope.currentRoute = $location.path();

In this example, $location.path() returns the current route path as a string.

Make sure to include the AngularJS library in your project, and if you are using routing, also include the ngRoute module.

JS snippet :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>

And in your AngularJS module:

var myApp = angular.module('myApp', ['ngRoute']);

Get current route for version of Angular 2-9

In Angular 2 and above, we typically use the Angular Router to work with routes. To get the current route, you can inject the ActivatedRoute service into your component and then access the snapshot property.
Code snippet :

import { ActivatedRoute } from '@angular/router';

// ...

constructor(private route: ActivatedRoute) {
  this.currentRoute = this.route.snapshot.url.join('/');
}

In this example, currentRoute will contain the current route as a string.

Get current route for version of Angular 10+

Starting from Angular 10, the ActivatedRouteSnapshot class provides a url property directly, so you can simplify the code.
Code snippet :

import { ActivatedRouteSnapshot } from '@angular/router';

// ...

constructor(private route: ActivatedRouteSnapshot) {
  this.currentRoute = this.route.url.join('/');
}

Get current route for version of Angular 17

Following are the various ways :

1. Using ActivatedRoute:

Inject ActivatedRoute in your component’s constructor:

Code snippet :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  currentUrl: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.currentUrl = this.route.snapshot.url[0].path;
  }
}

2. Subscribing to Router Events:

Router and NavigationEnd in your component’s constructor:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  currentUrl: string;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(event => {
        this.currentUrl = event.url;
      });
  }
}

3. Using Router.url Property (for Simple Needs):

Access the url property of the Router instance:

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private router: Router) {
    this.currentUrl = this.router.url;
  }
}

4. Using Location Service (for Simple Path Access):
Inject the Location service in your component’s constructor:

Code snippet :

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  currentPath: string;

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

Choose the method that best suits your specific needs:

• Use ActivatedRoute when you need access to route parameters or other route information beyond just the URL.
• Use Router.events when you need to react to route changes dynamically.
• Use Router.url or Location for simple cases where you only need the current URL or path.