The Angular Location service is used to interact with the browser URL. We can use it to track the URL changes. Use it to read the current URL, modify the URL, go back or forward through the browser history, etc. In this article, we will look at how to make use of Angular Location service. We learn how to make use of location.back(), location.forward(), location.path(), location.go(), location.replacestate(), location.getState(), location.onUrlChange() etc

We usually make use of Angular Router to navigate to different parts of the application. The location service does not perform navigation but allows us to manipulate the URL. It bypasses the Angular Router completely.

How to use Location Service

The Location service is part of the @angular/common package. Hence import it in the Component, where you want to use it.

And finally, inject it to the component, where you want to use it

Going back and forward

back()

Use location.back() to go back to the previous URL.

forward()

Use location.forward() to go to the next URL.

Get the current path

path()

The current URL path can be obtained using the location.path()

Manipulate the URL

go()

Use the location.go() to change the current URL to a new given URL. It also pushes the new URL into the browser history. The location.go() does not navigate to the new URL. To navigate to the new URL, you must use the Angular router

Note that, you can also change the state object of the URL.

replaceState()

Use the location.replaceState() to change the current URL to a new given URL. It replaces the top item in the browser history.

This is very similar to location.go() with one difference. The location.go() add the URL to the browser history, while location.replaceState() replaces the top item in the history with the newly added one

Get History State Object

getState()

The above introduced in Angular 8, returns the current value of history. state object. You can use this method to pass the dynamic data via the Angular Routes

You can pass the state object by using the following ways.

1. By using routerLink directive.
2. By using the router.navigateByUrl() method.
3. via location.go() method of the location service
4. via location.replaceState() method of the location service

Listen to URL Changes

onUrlChange()

Use onUrlChange to listen for a change in URLs. This API can be used to catch updates performed by the Angular framework. These are not detectable through “popstate” or “hashchange” events.

Subscribe to the platform’s popState events.

Subscribe to the location service to listen to the platform’s popState events

The popState events are fired when

1. User clicks on the Back/Forward button on the browser window
2. location.forward() & location.back() is called.

And not fired when

1. Location.go() and location.replaceState() is used.

Summary

It’s better to use the Router service to trigger route changes. Use Location Services, only when you need to manipulate the Router, without resulting in a page refresh.