Opening the Dialog in Callback Running Outside Angular Zone

Environment

Description

How can I open Dialog instances in callbacks that are running outside the Angular zone (for example in HTTP error handler)?

Solution

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.

In order for this approach to work as expected, the Dialog has to be opened inside the NgZone—for 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.

Copy CodehandleError(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));
    });
  }

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

Suggested Links

• API Reference of the Dialog
• Using the Dialog Service