Save Route History — Angular Routing

Easiest solution there is for Angular applications where you need to access the previous URL or History.

There are two approaches as per our need :

1. Where we need to go back to previous page, just like browser back button
2. Storing All routes history for business logic purposes

1. Let’s look at the first scenario, Navigating back to the previous page

This is fairly simple than how it sounds.

The answer is Location Service.

An Angular service that applications can use to interact with a browser’s URL.

You just need to import it :

import { Location } from '@angular/common';

Inject it inside a Component / Service :

constructor(private location: Location) { }

Simply Use it in Component / Service

goBack() {
    this.location.back(); //Navigates back in platform's history
}

You can also create a shared service for the same so that this will be available across the application.

2. Now second scenario, Storing All routes history

For this particular scenario we will be using

import { Router, NavigationEnd } from ‘@angular/router’;

Router will emit events on route changes. This will be an Observable which we can subscribe to and get access to current URL.

We will be adding this to the parent component of the application.

Here there are two approaches,

1. Saving All routes

import { Component, VERSION, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
    UrlHistory: string[] = [];
    constructor(private router: Router) {}
    
    ngOnInit() {
        this.router.events
           .pipe(filter((event) => event instanceof NavigationEnd))
           .subscribe((event: NavigationEnd) => {
               this.UrlHistory.push(event.url);
            });
    }
    getPreviousUrl() {
        return this.UrlHistory[this.UrlHistory.length - 2]; 
    }
    getCurrentUrl() {
        return this.UrlHistory[this.UrlHistory.length-1]; 
    }
}

2. Saving Previous and Current Route

This service will help getting previous and current URLs as well as going back to the previous page.

import { Injectable } from "@angular/core";
import { Location } from "@angular/common";
import { Router, NavigationEnd } from "@angular/router";

interface LocationHistory {
    previousUrl: string | null;
    currentUrl: string | null;
}

@Injectable({ providedIn: "root" })
export class UrlService {
    private locationHistory: LocationHistory = {
        previousUrl: null,
        currentUrl: null,
    };

   constructor(private router: Router, private location: Location) {
        this.router.events.subscribe((event) => {
            if (event instanceof NavigationEnd) {
                this.locationHistory.previousUrl =
                    this.locationHistory.currentUrl;
                this.locationHistory.currentUrl = event.url;
            }
        });
    }

    public goBack(): void {
        this.location.back();
    }
    public getPreviousUrl(): void {
        return this.locationHistory.previousUrl;
    }
}

Hope this helps.

Cheers!!

Sangwin Gawande

About me : https://sangw.in