Display Material Popup in Angular before user leaves the page

Question

Display Material Popup in Angular before user leaves the page

My goal is to display an Angular Material Dialog Box (Popup window) when the user clicks the Chrome Window Close button. The Dialog modal should prompt the user if they want to save changes or cancel.

However, the modal only appears for a brief moment and then closes without waiting for user input. How can I resolve this issue?

How can we detect when the user closes the browser?

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
    this.openDocumentSaveDialog();
}


public openDocumentSaveDialog(): void {
    const documentSaveDialogRef = this.documentSaveDialog.open(DocumentSaveDialogComponent, {
        width: '600px',
        height: '200px',
        disableClose: true,
        autoFocus: false,
        data: null
    });

    documentSaveDialogRef.afterClosed().subscribe(result => {
        this.closeMenu.emit()
    });
}

https://i.sstatic.net/5U0b1.png

Note: We want to avoid displaying the native Chrome browser popup but instead show a custom popup.

Angular Material Dialog Box: https://material.angular.io/components/dialog

javascript angular typescript angular-material angular10

Answer 1

Answer №1

Unfortunately, the beforeunload event does not support a callback function that returns a promise, making it impossible to display a popup and return a value synchronously.

Instead, you can simply always return false or call

event.preventDefault()

If the user chooses to leave the page, you can use

window.close(...)

If not, the event is already canceled.

Your code should be structured like this:

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
    this.openDocumentSaveDialog();
    event.preventDefault();
    event.returnValue = '';
    return false;
}


public openDocumentSaveDialog(): void {
    const documentSaveDialogRef = 
this.documentSaveDialog.open(DocumentSaveDialogComponent, {
        width: '600px',
        height: '200px',
        disableClose: true,
        autoFocus: false,
        data: null
    });

    documentSaveDialogRef.afterClosed().subscribe(result => {
        if(!result)
           window.close()
        this.closeMenu.emit()
    });
}

Answer 2

Unfortunately, the beforeunload event does not support a callback function that returns a promise, making it impossible to display a popup and return a value synchronously.

Instead, you can simply always return false or call

event.preventDefault()

If the user chooses to leave the page, you can use

window.close(...)

If not, the event is already canceled.

Your code should be structured like this:

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
    this.openDocumentSaveDialog();
    event.preventDefault();
    event.returnValue = '';
    return false;
}


public openDocumentSaveDialog(): void {
    const documentSaveDialogRef = 
this.documentSaveDialog.open(DocumentSaveDialogComponent, {
        width: '600px',
        height: '200px',
        disableClose: true,
        autoFocus: false,
        data: null
    });

    documentSaveDialogRef.afterClosed().subscribe(result => {
        if(!result)
           window.close()
        this.closeMenu.emit()
    });
}

Answer 3

Answer №2

It is unfortunate that browser security restrictions make it impossible to stop users from closing the window. In my view, there is no way to achieve this; your best option is to display a standard warning message reminding the user about potential data loss upon closing the browser window.

Answer 4

It is unfortunate that browser security restrictions make it impossible to stop users from closing the window. In my view, there is no way to achieve this; your best option is to display a standard warning message reminding the user about potential data loss upon closing the browser window.

Answer 5

Answer №3

It seems to be effective in my case. However, the lack of control over display is a drawback.

@HostListener('window:beforeunload', ['$event'])
  showWarningMessageOnTabClose($event) {
      $event.returnValue = 'Are you sure you want to leave? Changes may not be saved.';
  }

Answer 6

It seems to be effective in my case. However, the lack of control over display is a drawback.

@HostListener('window:beforeunload', ['$event'])
  showWarningMessageOnTabClose($event) {
      $event.returnValue = 'Are you sure you want to leave? Changes may not be saved.';
  }

Display Material Popup in Angular before user leaves the page

Answer №1

Answer №2

Answer №3

Similar questions

Creating elements in Polymer 2.0 is a breeze. Simply use the `createElement` method, then seamlessly import it using `Polymer

Optimizing jqGrid: Enhancing saveRow function to properly synchronize with editRow function

Engage with the item provided to an Angular2 component as an Input parameter

Issue encountered while defining a component in Angular 16

Issue with custom HTML5 video progress bar not syncing with video playback

Develop an Engaging JavaScript Quiz with Elements That are Generated Dynamically

The class name is not defined for a certain child element in the icon creation function

Transmitting data from the front end to the server in React/Shopify for updating API information using a PUT request

Exploring Angular2 utilizing matrix-style URL notation

What is the best way to display two columns in each row using Angular?

Conceal dropdown options when there is no text entered

What causes the React app to fail in maintaining the login session with the Node.js server?

Ways to identify the visible elements on a webpage using JavaScript

You cannot assign an optional parameter in Express after it has already been declared

Observes the behavior of a React component with the context.router property being undefined

How can I make a page scroll to the center when clicking on a carousel?

What is the fate of the code that comes after executing history. push in React?

accessing the offsetTop property of React elements

Implementing a universal (click) attribute for Angular 2 in CSS

"What are the necessary components to include in UserDTO and what is the reasoning behind their