How to Work with Angular 2+ Location Service?

Angular location service will be dealt with in this article, location service is a part of Angular 2+. Thanks to this service, you can easily interact with the path of the current URL. When it comes to navigation needs, we mostly depend on the Angular router.

However, in some cases, you need to rely on the location service.Here you will affect the URL without having to involve the router. Also, at times, you can combine the router and the location service to perform a few operations.

How to use the Location Service in Angular?

To gain access to the Angular $location service, you import it along with LocationStrategy & PathLocationStrategy from @angular/common. You can inject Location inside the constructor.

// ...
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
 
@Component({
  // ...
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})

export class AppComponent {
  location: Location;
  constructor(location: Location) { this.location = location; }
}

Going Forward and Backward in Angular using Location API

In case if you want the method to go to and fro in the navigation:

GoForward() {
  this.location.forward();
}

GoBack() {
  this.location.back();
}

How to Get Current Path in Angular?

In order to get the current path, you may use the location.path method:

getCurrentPath() {
  alert(this.location.path());  
}

Understand Useful Methods of Location Service in Angular 7

• go: URL will be changed and will append it to the history of the browser.
• replaceState: Here it changes the URL. It will also the URL that appears on top in history. This way, when you try to go back, you always go back to the one before.
• isCurrentPathEqualTo: It simply compares 2 given path values.
• normalize: While taking a path, it will be returning a normalized path.

How to Get Current Path in Angular?

The Angular router service offers events observable, If you wish to detect the navigation changes, then subscribe to the events method which will be returning an observable. Let’s assume that we wish to detect the changes in the URL. We have used a baseURL member variable for the same:

baseURL: boolean;

ngOnInit() {
  this.router.events.subscribe(event => {
    if (this.location.path() !== '') {
      this.baseURL = false;
    } else {
      this.baseURL = true;
    }
  });
}

// ...
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
 
@Component({
  // ...
  providers: [Location]
})

export class AppComponent implements OnInit {
 
 constructor(
   private location: Location, 
   private router: Router) 
 { }

 ngOnInit() {
   this.router.events.subscribe(event => {
     if (this.location.path() !== '') {
       this.baseURL = false;
     } else {
       this.baseURL = true;
     }
   });
 }

}