Dialog opened by custom ErrorHandler provider in response to async event does not close


I have a general Alert Dialog component that I use for various purposes throughout an Angular application (simplified)…

  selector: 'app-alert-dialog',
  template: `<mat-dialog-content>{{message}}</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-raised-button mat-dialog-close>{{buttonText}}</button>
export class AlertDialog {
  message: string = 'An unspecified error has occurred';
  buttonText = 'Cancel';

    private data: {
      message: string;
      buttonText: string;
    private dialogRef: MatDialogRef<AlertDialog>
  ) {
    if (data?.message) this.message = data.message;
    if (data?.buttonText) this.buttonText = data.buttonText;

The dialog windows specify default options in the app.module providers:

  providers: [
    { provide: ErrorHandler, useClass: ErrorHandlerService },
    // default options for dialogs
      useValue: {
        disableClose: true,
        hasBackdrop: true

I also implement a custom ErrorHandler provider that displays relevant errors through the Alert Dialog.

  providedIn: 'root'
export class ErrorHandlerService extends ErrorHandler {
  constructor(private dialog: MatDialog) {

  handleError(err: any): void {

    this.dialog.open(AlertDialog, {
      data: { message: err.message }

The errors displayed are frequently ones returned by the back-end server asynchronously.

In the case of an error being thrown asynchronously, the dialog does not close in response to the button (even with a (click)="closeDialog()" handler) unless you click the button and then also click elsewhere off the button.

I have a StackBlitz project that demonstrates the issue here:

Is there a way to close the dialog opened asynchronously with a single button click?


Use ngZone. Improved code:

  constructor(private dialog: MatDialog, private ngZone: NgZone) {

  handleError(err: any): void {
    this.ngZone.run(() => {
      this.dialog.open(AlertDialog, {
        data: { icon: 'Error', message: err.message, buttonText: 'Uh oh!' }

For more information see answer.

Answered By – Vugar Abdullayev

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.