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:
- The first parameter passed to
pushState()
isstate
which is an JavaScript object that holds the history details. To prevent using going back to previous state, we set this tonull
. - The second parameter i.e.
title
does not play much role in this functionality and can be set to empty string. - 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();
}