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.