While using MDDialog in my Angular app, I've encountered a couple of issues. Whenever a user clicks on the div, flickering occurs. Additionally, if the user then clicks on one of the buttons, the afterclose event is not triggered.
Can anyone provide suggestions on how to address these problems?
Here is the code snippet for calling the dialog:
private openDialog(data) {
const dialogRef = this.dialog.open(DialogComponent, { width:
'350px', height: '100px', disableClose: true});
dialogRef.updatePosition({ top: '95px' });
dialogRef.afterClosed().subscribe(result => {
this.dialogResult = result;
console.log('dialogResult : ' + this.dialogResult);
if (this.dialogResult) {
this.Home();
}
});
this.dialogResult = '';
}
Dialog HTML:
<div md-autofocus>
<div md-dialog-container>
<h2 md-dialog-title>Information</h2>
<md-dialog-content> Do you want to proceed? </md-dialog-content>
<div md-dialog-actions>
<div class="dialogButtons">
<button id= "YesButton" class="dialogButton"
(click)="dialogRef.close(true)">Yes</button>
<span class="flex1margin"></span>
<button id="NoButton" class="dialogButton"
(click)="dialogRef.close(false)">No</button>
</div>
</div>
</div>
</div>
Dialog Component TypeScript:
import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from "@angular/material";
@Component({
selector: 'your-dialog-selector',
templateUrl: './dialog.component.html'
})
export class DialogComponent {
constructor(public dialogRef: MdDialogRef<any>) {
}
}