Angular Material MatDialog won't close

Question

I faced a weird problem using MatDialog. In my main component, I use @Injectable service which run webworker to process something in the background. After the processing is done the service opens MatDialog. In this dialog, there are 2 buttons (each of them closes the dialog).

close(result: boolean) {
  this.dialogRef.close(result);
}

The problem is that it rarely closes immediately after I click the button, sometimes I have to wait even 20 seconds for it to close. I noticed that after I click the button and click on something else the dialog closes immediately (focus loss or something?). I thought that there is something wrong with the way I close the dialog but I run it in onInit method in the main component and it works fine. That means it has something to do with the async code. Does anyone have an idea on how to solve it?

Answer 1

Detect changes in your close method:

close(result: boolean) {
  this.dialogRef.close(result);
  this.cd.detectChanges();
}

The constructor would be:

constructor(private cd: ChangeDetectorRef) {
}

noticed that after I click button and click on something else the dialog closes immediately (focus loss or something?)

Angular detect changes when you move the mouse or click, and in result your dialog closes. What you need to do is manually check for changes in your close() method.