Lifecycle Hook or any method to detect User window close, User Initiated window refresh to show save exit custom popup modal

🚀 feature request for detect window close or refresh (user actions) and async await on user decision to save data

Relevant Package

Feature request for any lifecyclehook or any method or way to detect User window close to show custom made modal using promise and then decide action.

Description

Incase user is closing window or refreshing page , a popup needs to be shown and then action need to be done. I am stuck with simple confirm box whereas i need to show my custom dialog box. To track browser close , I am using Host Listener with window:beforeunload . The functionality works well however it supports only simple confirm box.

On using promises with async await to wait user choice , it does not work. The browser simply closes

Existing solution

@HostListener('window:beforeunload', ['$event'])

  public saveAndClosePromt($event) {

   let isSaveNeeded = checkUsersave();

    if (isSaveNeeded) {

      return confirm('your changes need to be saved');

    }

  }

checkUsersave() {
//logic for checking user save
}

possible solutions which didnt work

@HostListener('window:beforeunload', ['$event'])
public async  saveAndClosePromt($event) {

   let isSaveNeeded = checkUsersave();

    if (isSaveNeeded) {

     //modal show
   try
      {
      let decision:boolean = await this.Userdecision; //await user code is already figured out
      return decision;
      }
  catch(e){
      return false;
      }
      let userDecision = await this.Userdecision

    }

  }

checkUsersave() {
//logic for checking user save
}

I am able to show custom modal but the window automatically refershes or closes before user takes decision

check stackblitz link

https://stackblitz.com/edit/dynamic-component-service-based?file=src/app/service-based/example.component.ts

@HostListener("window:beforeunload", ["$event"])
 public saveAndClosePromt($event) {
   return this.open();
 }
async open(): Promise<boolean> {
    let decision: boolean;
    this.service.reset();
    let sadref = this.service.ShowPopUpModal();
    try {
      console.log("User Opens Modal And Await");
      decision = await sadref.instance.result;  //modal is open but window closes or refreshes as user decides 
      console.log("User has closed and decided :- " + decision);
    } catch (e) {
      decision = false;
      console.log("User has chose exit");
    }

    //
    console.log("Main modal closed");
    this.service.reset();

    return decision;
  }

Describe the solution you’d like

Current Solution to detect User initiated browser refresh, close and navigating away are

Describe alternatives you’ve considered

@HostListener('window:beforeunload', ['$event'])

  public saveAndClosePromt($event) {

   let isSaveNeeded = checkUsersave();

    if (isSaveNeeded) {

      return confirm('your changes need to be saved');

    }

  }

checkUsersave() {
//logic for checking user save
}

image

Please create a feature to track browser close or browser refresh by user

Require browser close lifecycle hook or method or any solution to show custom modal instead of plain confirm box

1 possible answer(s) on “Lifecycle Hook or any method to detect User window close, User Initiated window refresh to show save exit custom popup modal

  1. @parameshwarao This area is restricted by browsers because of the security. There is a minimal way how you can react > based on the implementation in browsers. You can’t definitely create or use any custom dialogs.

    There are some discussions on the W3C, how to implement something more functional, but it’s still in an early phase.

    I am able to show custom modal but the window automatically refreshes or closes before the user takes a decision.

    That’s exactly one of the restrictions implemented in browsers today.