How to get browser back action with confirm message in Angular 10

Question

I want to handle browser's back button action with confirm message. If I click Yes, browser has to redirect to previous state and If I click No, need to stay in same state. This need to be handle in Angular. Please correct my code and thanks.

@HostListener('window:popstate', ['$event'])
  onPopState(event: any) {
    var stayOnPage = event.currentTarget.confirm("Are you sure want to go back?");
    if (!stayOnPage) {        
       event.preventDefault(); >> not working
       return false;
    } else {
       
    }
  }

Check https://stackoverflow.com/questions/35922071/warn-user-of-unsaved-changes-before-leaving-page/42108319 — Nitin Daddikar, Feb 01 '21 at 13:43
@NitinDaddikar, sorry Its not helpful to me. I want confirm message and conditionally I want to stay on same page. — YYY, Feb 01 '21 at 14:01
@YYY `popstate` event is not cancelable. See https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event and https://stackoverflow.com/questions/32432296/is-it-possible-to-e-preventdefault-in-window-onpopstate — Benny Halperin, Feb 01 '21 at 14:59
@Benny thanks. is there any other ways to handle browser back event with confirm message and on click of 'No' button need to cancel back event. — YYY, Feb 02 '21 at 06:30
@YYY I'm working on it. Hope to come back with a solution and example. — Benny Halperin, Feb 02 '21 at 08:56

score 1 · Answer 1 · answered Feb 03 '21 at 17:55

You need to do the following in the Angular way:

Have a guard service that implements CanDeactivate (called when you navigate away from a page), and configure your router to use it
Listen to router events in the page where you want the option to prevent the Back button from working

I also implemented a generic confirmation material dialog and service.

See the full example on Stackblitz here. Below is the important code snippets:

App Routes

const routes: Routes = [
  /**
   * About page is where we are guarding the navigation
   */
  { path: "about", component: AboutComponent, canDeactivate: [NavigationGuardService] },
  { path: "", component: HomeComponent }
];

Navigation Guard

import { Injectable } from "@angular/core";
import { CanDeactivate } from "@angular/router";
import { Observable } from "rxjs";
import { DataService } from "./data.service";

export interface DeactivationGuarded {
  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class NavigationGuardService implements CanDeactivate<any> {
  constructor(private dataService: DataService) {}

  /**
   * Angular calls it when navigating away from the backFromAboutPage
   * Notice it is asynvhronous in our case because we are waiting for the user
   * to confirm or deny
   */
  canDeactivate(component: DeactivationGuarded): boolean | Observable<boolean> | Promise<boolean> {
    if (!this.dataService.backFromAboutPage) {
      return true;
    }

    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

The Monitored Page

import { Component, OnDestroy, OnInit } from "@angular/core";
import { MatDialogConfig } from "@angular/material/dialog";
import { NavigationStart, Router } from "@angular/router";
import { Observable, Subscription } from "rxjs";
import { filter } from "rxjs/operators";
import { ConfirmationDialogService } from "../confirmation-dialog.service";
import { DataService } from "../data.service";
import { DeactivationGuarded } from "../navigation-guard.service";

@Component({
  selector: "app-about",
  templateUrl: "./about.component.html",
  styleUrls: ["./about.component.css"]
})
export class AboutComponent implements OnInit, OnDestroy, DeactivationGuarded {
  routerSubscription: Subscription;

  constructor(
    private dataService: DataService,
    private router: Router,
    private confirmationDialogService: ConfirmationDialogService
  ) {}

  ngOnInit(): void {
    /**
     * Listen to the router events to identify when the user navigates away from the page
     * and distinguish between Back button and other means of navigation
     */
    this.routerSubscription = this.router.events
      .pipe(filter(event => event instanceof NavigationStart))
      .subscribe((event: NavigationStart) => {
        if (event.navigationTrigger == "popstate" && event.restoredState) {
          this.dataService.backFromAboutPage = true;
        } else {
          this.dataService.backFromAboutPage = false;
        }
        console.log("Back button:", this.dataService.backFromAboutPage);
      });
  }

  ngOnDestroy(): void {
    this.routerSubscription.unsubscribe();
  }

  /**
   * Called from the navigation guard when navigating away from the page
   * Here we show the confirmation dialog
   */
  canDeactivate(): boolean | Observable<boolean> | Promise<boolean> {
    const dialogConfig: MatDialogConfig = {
      data: {
        title: "",
        content: `Go Back?`
      }
    };

    this.confirmationDialogService.openDialog(dialogConfig);

    return this.confirmationDialogService.back$.asObservable();
  }
}

How to get browser back action with confirm message in Angular 10

1 Answers1