Accessing the Previous URL in Angular

Do you have an Angular application where you need access to the previous url, but you’re stuck on how to get it? The answer is easier than you may think! Read below on how to get the previous url and then how to make it globally accessible throughout your application. You can also check out the code in this example here at my Stackblitz project.

Setting the previous URL

In your app.component.ts file make sure you import Router and define it in your constructor. Next, you should create two new variables, the previousUrl and currentUrl. Then, you will subscribe to router events and filter those events by the NavigationEnd type event. This gives us access to the current url. Finally, we will set the previousUrl to the value of currentUrl and set the value of currentUrl to the filtered event url value. That’s it!

import { Component, VERSION, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
previousUrl: string = null;
currentUrl: string = null;
constructor(private router: Router) {}

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

Making it globally accessible

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Injectable()
export class UrlService {
private previousUrl: BehaviorSubject<string> = new BehaviorSubject<string>(null);
public previousUrl$: Observable<string> = this.previousUrl.asObservable();
...

Using a behavior subject gives you the ability to set the previous url directly. You can then set the value of the observable to the behavior subject. You will notice that I have kept the behavior subject private, this is so we can restrict access to the behavior subject. Next, in the url.service.ts file you can create a method to set the value of the previous url.

setPreviousUrl(previousUrl: string) {
this.previousUrl.next(previousUrl);
}

This sets the value of the behavior subject, which subsequently also sets the value of the observable. Now, any components that subscribe to the previous url observable will receive the updated value!

Subscribing to the previous URL observable

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UrlService } from '../shared/url.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
previousUrl: string = '';
constructor(private urlService: UrlService) { } ngOnInit(){
// Or subscribe to the previous url observable here
this.urlService.previousUrl$
.subscribe((previousUrl: string) => {
this.previousUrl = previousUrl
});
}
}

Now you can use the previous url anywhere in your component, and receive any changes to its value!

Final thoughts

You can find me on Twitter, GitHub, LinkedIn, and my website!

Full-stack software engineer specializing in web and mobile development. Always learning new things. “There is no growth in the comfort zone…”