Open Dialog in an Error Handler

The Dialog provides the DialogService which enables you to open Dialog instances dynamically.

For more information on using the DialogService, refer to the Angular service article.

Opening the Dialog inside the Angular Zone

In order for this approach to work as expected, the Dialog has to be opened inside the NgZonefor example, to display a Dialog from an error handler callback that is typically run outside the Angular zone, you have to explicitly call the open method of the DialogService from within the zone.

handleError(error: Error | HttpErrorResponse) {
    this.ngZone.run(() => {
        this.dialogService.open({
          title: 'Error Dialog',
          content: 'An error occured',
          actions: [
            { text: 'No' },
            { text: 'Yes', primary: true }
          ],
          width: 450,
          height: 200,
          minWidth: 250
        }).result.subscribe(result => console.log(result));
    });
  }

Calling the DialogService in the Angular Zone

The following example demonstrates how to use the Dialog service in an error handler.

Example
View Source
Edit In Stackblitz  
Change Theme: