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 Angular there is no out-of-the-box way to get the previous url. However, you can use the Router package Angular provides to make this work.

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

To make the previous url available outside of your app.component.ts file you can create a service with an observable that your components can subscribe to that holds your previous url value. Use the Angular CLI to create the service ng g s shared/url. In the url.service.ts file, you should create both a previousUrl behavior subject and observable.

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

In any component you want to access the previous url, you need to import the url service, define it in its constructor, subscribe to the previous url observable, and set it as a variable in the component.

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 should now know how to get the previous url, and how to access its value globally throughout your Angular application! You could also use this same technique for the current url as well. Don’t forget you can visit my Stackblitz project for a live example on how to do this! Thanks for reading!

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