Opening the Dialog in Callback Running Outside Angular Zone

Updated on Feb 20, 2026

Environment

Product

Progress® 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)?

This Knowledge Base article also answers the following questions:

• How to use the Dialog service to open Dialog instances in callbacks running outside the Angular zone?
• How to display a Dialog from an HTTP error handler in Kendo UI for Angular?

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.

For this approach to work as expected, open the Dialog inside the NgZone. For example, to display a Dialog from an HTTP error callback that runs outside the Angular zone, explicitly call the open method of the DialogService from within the zone.

1. Send an HTTP request and handle the error in the subscribe callback.

   html

   <button kendoButton type="button" (click)="runExample()">Run</button>
   <div kendoDialogContainer></div>

2. In the error handler, use NgZone.run() to re-enter the Angular zone and call DialogService.open() to display the Dialog.

   ts

   constructor(
       private dialogService: DialogService,
       private ngZone: NgZone
   ) {}
   
   private handleError(): void {
       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 demo intentionally sends an HTTP request to an invalid URL to trigger a 404 error. The error callback then opens the Dialog. The console error is expected behavior.

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Dialog
• Using the Dialog Service