Access the Previous URL — Angular

Hello awesome people, Hope you all are doing great. In this story let’s discuss how we can access the previous URL in our angular application.

That too not limited to a single component we will see how we can convert it into a service so that whenever we subscribe to that service from anywhere in the application it is accessible to us with the latest updated value.

In our app.component.ts,

We will use Router and NavigationEnd from @angular/router , and filter from rxjs/operators to achieve so.

In the constructor, we will define the router as private router: Router . Then from router events, we will filter out the event which is the instance of NavigationEnd. And with respect to that, we can access the current URL. Now using the current URL we will write the logic to store it as the previous URL when we navigate ahead from the current route.

Note: NavigationEnd triggers an event when navigation ends successfully.

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
export class AppComponent implements OnInit {
   previousUrl: string = '';
   currentUrl: string = '';
   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;
      });
      
      // or
      
      this.router.events.subscribe((event: any) => {
          if (event instanceof NavigationEnd) {
             this.previousUrl = this.currentUrl;
             this.currentUrl = event.url;
          }
      });
   }
}

From the above logic, we can access the previous URL in the app component only. Now let's see how we can convert it into service so that it can be accessed from anywhere in the application.

Run the following command to create the URL service. The command will create the URL service inside the shared folder. shared/url — named: url.service.ts

$ ng g s shared/url

Here we will make use of BehaviorSubject and Observable both. Using Observable<string> type we can set the BehaviourSubject<string> directly as BehaviourSubject is a type of Subject and Subject is a special type of Observable.

Also, we have defined one setter function which sets the value of previousUrl.

import { Injectable } from ‘@angular/core’;
import { BehaviorSubject, Observable } from ‘rxjs’;
@Injectable()
export class UrlService {
  private previousUrl: BehaviorSubject<string> = new BehaviorSubject<string>(null);
  isPreviousUrl: Observable<string> = this.previousUrl.asObservable();
  constructor() { }
  setPreviousUrl(previousUrl: string) {
   this.previousUrl.next(previousUrl);
  }
}

Okay, fine till now. But you may ask that BehaviorSubject is a type of Subject only then why didn’t we use Subject directly right?

Using Subject is also fine but in that case, to get the latest value you will have to subscribe to its value every time. But using BehaviorSubject you can directly set the value of previousUrl in your component to any variable that you defined to store the value of previousUrl and you can subscribe too.

Now in any component, we can simply import the URL service and utilize it.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UrlService } from '../shared/url.service';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  // directly set the value
  previousUrl: Observable<string> = this._urlService.isPreviousUrl;
  constructor(private _urlService: UrlService) { }
  ngOnInit() {
    // Or we can simply subscribe to it here
    this._urlService.isPreviousUrl.subscribe((previousUrl: string)   => {
      console.log(previousUrl);
    });
  }
}

Conclusion

Now we know how we can access the value of the previous URL, that too using a service that can be used throughout the angular application. In case of any doubt or if you just want to say Hi! feel free to reach me on LinkedIn or GitHub.

If you like the blog make sure to take a look at my YouTube channel for more amazing stuff.