Angular 12: How to detect when a browser tab is closing and implement a confirmation dialog with MatDialog

I have a scenario where I am checking if the browser tab is closed using the code below. It currently works with windows dialog, but I would like to incorporate MatDialog for confirmation instead.

 @HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
    return false;
  }

I attempted the following code, however, it did not work as expected.

@HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
    this.iDialogData.title = 'Unsaved changes';
    this.iDialogData.bodyMessage = 'If you leave this page, any unsaved changes will be lost.';
    this.iDialogData.cancelBtnText = 'Cancel';
    this.iDialogData.mainbtnText = 'Leave page';
    const dialogRef = this.openDialog();

    return dialogRef.afterClosed().pipe(map(result => {
      if (result !== undefined)
        return true;
      else
        return false;
    }));
  }

Answer №1

If you're looking for a solution, consider exploring this approach:

@HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
    if (this.canClose) {
        return true;
    }

    this.iDialogData.title = 'Unsaved changes';
    this.iDialogData.bodyMessage = 'If you navigate away from this page, any unsaved modifications will be discarded.';
    this.iDialogData.cancelBtnText = 'Cancel';
    this.iDialogData.mainbtnText = 'Leave Page';
    const dialogRef = this.openDialog();

    dialogRef.afterClosed().subscribe(result => {
        if(result) { 
           this.canClose = true;
           // fire the event again
        }
    });
    return false;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The matInput value remains stagnant and fails to update

I am encountering an issue with a form Input field for username and password. Here is the code snippet: <mat-form-field class="mdb-form-field-modal form-adjustments"> <input (keydown)="emailBtnFocus($event)" tabindex="0" matInput placeholder ...

Turn off sticky sidebar feature for mobile-friendly layout

I have encountered an issue with my script that I need assistance with. I am trying to disable this script for responsive or mobile view, but despite trying various methods, it is not functioning as expected. <script type="text/javascript"> $(func ...

Validating multiple conditions in Typescript by passing them as function parameters

As a beginner in TS/JS, I am looking to validate multiple conditions passed as arguments to a function. For instance, currently I am verifying the user role name, but in the future, I may need to check other conditions. validateUserDetails(): Promise< ...

Is IPv6 like a JavaScript string in any way?

Introduction In the era of IPv4, life was simpler as IPv4 addresses could easily be converted into 32-bit integers for various calculations. However, with the introduction of IPv6, things have become more complicated due to the lack of native support for ...

How can I display base64 image data in a new window without triggering a block?

Currently experiencing challenges with Javascript. Utilizing html2canvas to convert a div to a canvas and then using .toDataURL to convert the canvas to a base64 data stream. Attempting to open base64 image data in a new window, but facing blocks from va ...

Is it possible to share a variable between different scopes in an Angular environment?

As I dive into building my first real Angular.js application, focused on assisting judges during courtroom hearings, I am encountering various challenges and learning how to overcome them. The application consists of views such as Calendar, Documents, and ...

Update a div in PHP using the data received from an AJAX response

I recently developed a PHP application and encountered an issue with updating the value of a date picker. The user is prompted for confirmation when changing the date, and upon confirmation, the date in the "expiry" field (with id expiry) should update alo ...

The Click Event is failing to trigger for a dynamically created ID within a span element

I am currently working on a Task Project. In this project, I have been adding items dynamically and generating items dynamically as well. However, when it comes to deleting items by clicking on a span element, the click event doesn't seem to work. I ...

Attempting to merge the data from two separate API responses into a single array of objects

I have a current project in which I'm dealing with an object that has three separate arrays of objects. Here's a glimpse of the structure... [ Array 1:[ { key: value} ], Array 2:[ { key: value}, { key: value} ], Array ...

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Is there a way to display an X mark in red on checkboxes when the ng-disabled condition is evaluated as true? I am a beginner in Angular.js and would appreciate any assistance. Here is what I have attempted so far: if (module.Name === 'val1' || ...

I have the latitude and longitude for both the shop and user, and I am looking to display a list of shops in order based

Currently, I have the latitude and longitude for both my shop and the user. My objective is to display a list of shops that fall within the geographic area between the user's location and the shop's coordinates using Sequelize ORM. Can you provid ...

Utilize ServersideProps to input data into the server-side

Can data be retrieved from the server-side configuration file on the client using getServersideProps() in Next.js? What is the best way to send this data as props or retrieve it in a different manner on the client side? I attempted to use publicRuntimeCo ...

Discontinuing the mobx autorun feature upon componentWillUnmount

In my componentDidMount, I have the following autorun function: componentDidMount() { this.autoUpdate = autorun(() => { this.setState({ rows: generateRows(this.props.data) }) }) } Unfortunate ...

What steps can I take to make sure my JavaScript code accurately calculates numbers without resulting in undefined or NaN values?

I'm having an issue with my javascript code for a simple interest calculator. Every time I try to calculate the amount, it keeps returning NaN. It seems like the code is treating the + as if I'm trying to concatenate strings, and I'm not sur ...

Exploring various data promises in AngularUI router

I am attempting to utilize the $q service to resolve multiple promises using the $q.all() function with AngularUI router. However, I am encountering issues where it is failing or not functioning as expected. This snippet is from my configuration file that ...

Having trouble with ng-click not correctly updating values within ng-repeat

Here is the code snippet: <div ng-repeat="data in products"> <div class=edit ng-click="dataUI.showEdit = true; content = data;"> </div> <div ng-repeat="renew in data.renewed"> <div class=edit ng-click="dataUI ...

Display loading spinner and lock the page while a request is being processed via AJAX

Currently, I am working on a project using MVC in C#, along with Bootstrap and FontAwesome. The main objective of my project is to display a spinner and disable the page while waiting for an ajax request. Up until now, I have been able to achieve this go ...

Maximizing the potential of mouse positioning in Angular

I am working with an Angular form that has a textarea <textarea class="form-control" id="message" formControlName="message" (fo ...

Creating a custom data type using values from a plain object: A step-by-step guide

I recently came across an object that looks like this: const myObject = { 0: 'FIRST', 10: 'SECOND', 20: 'THIRD', } My goal is to define a type using the values from this object, similar to this: type AwesomeType = &apos ...

What is the best way to determine the range in which the value falls?

Currently, I am working on validating whether a User has the required karma (reputation) to perform certain actions, such as placing a bid on an item. The karma value falls within the interval [-25; 100]. Additionally, it is noted that as a user accumulate ...