Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Confirm message before closing material dialog accidentally in Angular?

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);

    })
like image 603
Ashish Kumar Avatar asked Nov 27 '18 10:11

Ashish Kumar


People also ask

How do I stop angular modal dialog closing?

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

How do I stop mat dialog from closing?

By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the closeOnEscape property value to false to prevent closing of the dialog when pressing Esc key.

What is MatDialogRef in angular?

The MatDialog service is used to open dialogs with content design, styling, and animations. MatDialogRef provides a handle to the open dialog.

What is hasBackdrop?

hasBackdrop : defines if the dialog should have a shadow backdrop, that blocks the user from clicking on the rest of the UI while the dialog is opened (default is true)


2 Answers

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

like image 54
Abhishek Kumar Avatar answered Sep 23 '22 17:09

Abhishek Kumar


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

like image 42
IftekharDani Avatar answered Sep 24 '22 17:09

IftekharDani