Disabling browser back navigation in Angular

To prevent browse back navigation we make use of History.pushState()web api. As soon as the user lands on the component where we want to disable back navigation, we set history.pushState(null, '').

As per MDN docs, pushState() has three parameters:

1. The first parameter passed to pushState() is state which is an JavaScript object that holds the history details. To prevent using going back to previous state, we set this to null.
2. The second parameter i.e. title does not play much role in this functionality and can be set to empty string.
3. Final parameter is url which is optional that allows you to define the new history entry’s URL. It defaults to current document URL if not provided. This is what exactly we want - as soon as user lands on this component, they should kind of stick to current document URL and should not be able to navigate away!

When user navigates to a new state / page, a popstate event is fired. Here we take help of RxJs fromEvent and listen to popstate events whenever user tries to hit browser's back button & we can disable that action accordingly.

Note: please remember to unsubscribe from the observable once you're done else that will lead to memory leak

Here is code example:

import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private unsubscriber : Subject<void> = new Subject<void>();

ngOnInit(): void {
  history.pushState(null, '');

  fromEvent(window, 'popstate').pipe(
    takeUntil(this.unsubscriber)
  ).subscribe((_) => {
    history.pushState(null, '');
    this.showErrorModal(`You can't make changes or go back at this time.`);
  });
}

ngOnDestroy(): void {
  this.unsubscriber.next();
  this.unsubscriber.complete();
}

Stackbliz Example

Comments

[DrDaxter]

very helpful!. What if I want to disable the "go back" action for the entire application? should I add the pushState in app.component.ts?