All Components

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 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.

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.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';

import { AppComponent, ErrorsHandler } from './app.component';
import { HttpService } from './http.service';
import { HttpClientModule } from '@angular/common/http';
import { DialogsModule } from '@progress/kendo-angular-dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    DialogsModule,
    BrowserAnimationsModule
  ],
  providers: [
    HttpService,
    {
      provide: ErrorHandler,
      useClass: ErrorsHandler
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { DialogService } from '@progress/kendo-angular-dialog';
import { Component, NgZone, Injectable, ErrorHandler, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { HttpService } from './http.service';

@Component({
  selector: 'my-app',
  template: `
    <div style="text-align:center">
      <h1>
        Open Dialog from an error handler
      </h1>
    </div>
    <div>
      <p><button class="k-button" type="button" (click)="runExample()">Run</button></p>
      <div kendoDialogContainer></div>
    </div>
  `
})
export class AppComponent {
  constructor(
    private dialogService: DialogService,
    private httpService: HttpService,
    private ngZone: NgZone
  ) { }

  public runExample(): void {
    console.clear();
    this.httpService
      // trigger HTTP error
      .get('https://jsonplaceholder.typicode.com/1')
      // .get('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe(
        (result) => {
          console.log('result', result);
        }
      );
  }
}

@Injectable()
export class ErrorsHandler implements ErrorHandler {
  constructor(
    private dialogService: DialogService,
    private ngZone: NgZone
  ) { }

  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));
    });
  }
}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpService {
  constructor(private httpClient: HttpClient) {}

  public get(url: string, options?: any): Observable<ArrayBuffer> {
    return this.httpClient.get(url, options);
  }
}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article