New to Kendo UI for Angular? Start a free 30-day trial

Environment

ProductProgress® Kendo UI® for Angular Dialog

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 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));
    });
  }

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

Example
View Source
Change Theme:

In this article

Not finding the help you need?