Angular 11 Location Service Tutorial with Example

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.

Angular 11 Location Service Example

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.

Location
This service allows Angular app to communicate with the browser’s URL.

LocationStrategy
LocationStrategy service, gets the route state of an Angular app from the browser’s URL. Angular offers 2 location strategies: – HashLocationStrategy and PathLocationStrategy.

HashLocationStrategy
This service configures the Location service by following the hash fragment of the browser’s URL.

PathLocationStrategy
This service configures the Location service by following its state in the browser’s URL.

Following is the way of importing location services in Angular:

// ...
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

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

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

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

Getting Current Path

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

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

Angular 11 Location Service Methods

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.

Get Current Path with Event Observable

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;
     }
   });
 }

}

Conclusion

Finally, we have completed Angular 11 Location service tutorial with examples.