disabling browser back button for particular page(landing page)

Question

I am using angular 8. is there any way to disable browser back button on particular page (landing page). It should work on other page.

Answer 1

Copy the following command to your command line or terminal to install the package.

npm install --save angular-disable-browser-back-button

Import the BackButtonDisableModule to your project app.module.ts file and add it to imports list.

import { NgModule } from '@angular/core';
import { BackButtonDisableModule } from 'angular-disable-browser-back-button';

@NgModule({
...
imports: [
...
BackButtonDisableModule.forRoot()
],
...
})
export class AppModule {}

Module will prevent browser backspace navigation and return user to the same page by preserving all states. The issue of the prevented backspace navigation is that it will move user to the webpage top. So you can use module configuration to preserve scroll position as well.

import { NgModule } from '@angular/core';
import { BackButtonDisableModule } from 'angular-disable-browser-back-button';

@NgModule({
...
imports: [
...
BackButtonDisableModule.forRoot({
  preserveScrollPosition: true
 })
],
...
})
export class AppModule {}

That's it!