Accessing the Previous URL in Angular

Setting the previous URL

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();
...
setPreviousUrl(previousUrl: string) {
this.previousUrl.next(previousUrl);
}

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
});
}
}

Final thoughts

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Solving Popular Algorithms: Average Salary

Elegant Way to Implement Internationalization(i18n) in Angular

Using React Context API in NextJS Applications

Understanding JavaScript Loops and Iterators

Understanding loops in Javascript

Immutability in JavaScript: An In-Depth Guide

4 Ways to Make Your Properties Immutable in JavaScript | Tomoe Li

An Upgrade Path to Angular at Thomson Reuters

The Comparison Between Node.JS and Golang: Which One to Choose?

Beautiful Pictures Of Our Earth — 32

meme

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jacob Neterer

Jacob Neterer

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

More from Medium

What is new in Angular 14?

A cover image that contains Angular logo and “What is new in Angular 14” text

Jest Integration with Angular 12

How to disable events in Angular — Fran Prieto

Update Angular 10 to 13