Confirm message before closing material dialog accidentally in Angular?

Question

How can i use of beforeClose() method to show a confirmation message before closing the material dialog ?

this.dialogRef.beforeClose().subscribe(result => {
      var cn = confirm('You have begun editing fields for this user. 
                        Do you want to leave without finishing?')
      console.log(cn);

    })

You can't. The `beforeClosed` stream is used to hook on closing start, meaning the modal is already closing. If you want to cancel the closing, you will have to implement your own method. Maybe `canDeactivate` guards can help you, otherwise simply prevent the user from leaving. — , Nov 27 '18 at 10:35
Instead open a snackbar asking for confirmation, and if snackbar action is selected, then perform action accordingly. — Abhishek Kumar, Nov 27 '18 at 10:40
you can ask the user about confirmation before calling the `.close` method! — Prashant Pimpale, Nov 27 '18 at 11:07
@Ashish Is [this](https://stackblitz.com/edit/angular-z2ot9e) what you wanted? — Prashant Pimpale, Nov 27 '18 at 11:09
@PrashantPimpale i am asking for the situation if the user hit the refresh button or click outside of the dialog. — Ashish Kumar, Nov 27 '18 at 11:14
yes, have a look at:https://stackoverflow.com/questions/46772852/disable-click-outside-of-angular-material-dialog-area-to-close-the-dialog-with — Prashant Pimpale, Nov 27 '18 at 11:17
@PrashantPimpale to ask from the user I've already implemented this code on Close button click event. `onCloseDialog(): void { if (this.userDetailsForm.dirty || this.userDetailsForm.touched) { var cn = confirm('You have begun editing fields for this user. Do you want to leave without finishing?') console.log(cn); if(cn) { this.dialogRef.close('Discard'); } }else { this.dialogRef.close('Discard'); } }` — Ashish Kumar, Nov 27 '18 at 11:18
@PrashantPimpale thanks for the link but it is not going to help out here. — Ashish Kumar, Nov 27 '18 at 11:29

score 12 · Accepted Answer · answered Nov 27 '18 at 12:05

As you want the window.confirm on the following things :

if user hit the refresh button, or
click outside of the dialog

According to referrence link shared in comments,
i have implemented a Stackblitz Demo, which uses @HostListener
Code for esc, and refresh :

@HostListener('window:keyup.esc') onKeyUp() {
    let cn = confirm('Sure ?')
    if (cn) {
      this.dialogRef.close();
    }
  }

@HostListener("window:beforeunload", ["$event"]) unloadHandler(event: Event) {
      console.log('event:', event);
      event.returnValue = false;
}

And in ConfirmationDialog component, handle backDropClick() as

ngOnInit() {
  this.dialogRef.disableClose = true;
  this.dialogRef.backdropClick().subscribe(_ => {
    let cn = confirm('Sure ?')
    if (cn) {
      this.dialogRef.close();
    }
  })
}

Application Code : https://stackblitz.com/edit/dialog-example-beforeclose?file=app%2Fapp.component.ts

Thanks buddy, this is the right answer. `window:beforeunload` has helped me out here to achieve my solution. — Ashish Kumar, Nov 27 '18 at 14:21
can't we override the default message of `window:beforeunload` event ? — Ashish Kumar, Nov 29 '18 at 08:10
@AshishKumar yup, that was the problem with my case, i tried but was unable to produce my message on reload confirm box. So i thought let it be the same as confirm box was visible on reload. — Abhishek Kumar, Nov 29 '18 at 08:16

score 4 · Answer 2 · answered Nov 27 '18 at 11:58

you can prevent to close dialog from click outside or escusing disableClose: true

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      scrollStrategy: this.overlay.scrollStrategies.close(),
      disableClose: true //for diabled close dialog
    });

You can use confirmation dialog with below code :

 onNoClick(): void {
      var cn = confirm('You have begun editing fields for this user. Do you want to leave without finishing?');
       console.log(cn);
       if(cn){

    this.dialogRef.close();
       }
  };
  onOKClick(): void {
      var cn = confirm('You have begun editing fields for this user. Do you want to leave without finishing?');
       console.log(cn);
       if(cn){

    this.dialogRef.close();
       }
  };

HTML Code :

<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button (click)="onOKClick()" cdkFocusInitial>Ok</button>
</div>

reference Link: link1, link2

it'll not work when you'll refresh the page, my main issue was with refreshing of page if mat dialog is already opened . @Abhishek has given the right answer by using of `window:beforeunload` browser event with `@HostListener`. i also used to thought `beforeunload` will not work with material dialog. [link](https://stackoverflow.com/a/53499314/10288376) — Ashish Kumar, Nov 27 '18 at 14:18

Confirm message before closing material dialog accidentally in Angular?

2 Answers2