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?

Solution: To populate data I used constructor, after I switched to ngOnInit + in view assured with ngIf that data is loaded the problem disappeared. — wacik93, Jun 21 '20 at 09:52

score 0 · Answer 1 · answered Jun 09 '20 at 14:48

0

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.

answered Jun 09 '20 at 14:48

Maihan Nijat

9,054
11
62
110

Your solution didnt help. The important part of my issue is that it works normally when I open dialog in onInit method without any complex code execution. – wacik93 Jun 09 '20 at 15:15
Define "complex code execution" and do you have errors in console? – Maihan Nijat Jun 09 '20 at 15:17
Some rest api calls, webworker processing. I dont have any errors in console – wacik93 Jun 09 '20 at 15:42

Angular Material MatDialog won't close

1 Answers1