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 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.
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.
The MatDialog service is used to open dialogs with content design, styling, and animations. MatDialogRef provides a handle to the open dialog.
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)
As you want the window.confirm
on the following things :
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
you can prevent to close
dialog
from clickoutside
oresc
usingdisableClose: 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With