All Components

Angular Service

The DialogService is an Angular service providing API calls, which are used to create Dialog instances dynamically.

This means that the service helps create Dialog instances from TypeScript based on user interactions and without the need to define the component in a template.

Getting Started

The Angular dependency injection injects the Dialog service automatically in the constructors of the component. To create new Dialogs, use the open method and subscribe to the [result]() event stream to determine the choice of the user.

The following example demonstrates how to use the Dialog service.

import { Component } from '@angular/core';
import {
  DialogService,
  DialogRef,
  DialogCloseResult
} from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <div class="example-config" *ngIf="result">
        Dialog result: {{ result }}
      </div>
      <button (click)="showConfirmation()" class="k-button">Please confirm</button>
    </div>

    <div kendoDialogContainer></div>
  `
})
export class AppComponent {
  constructor( private dialogService: DialogService ) {}

  public result;

  public showConfirmation() {
      const dialog: DialogRef = this.dialogService.open({
          title: "Please confirm",
          content: "Are you sure?",
          actions: [
              { text: "No" },
              { text: "Yes", primary: true }
          ],
          width: 450,
          height: 200,
          minWidth: 250
      });

      dialog.result.subscribe((result) => {
          if (result instanceof DialogCloseResult) {
              console.log("close");
          } else {
              console.log("action", result);
          }

          this.result = JSON.stringify(result);
      });
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DialogModule }  from '@progress/kendo-angular-dialog';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      // Import the DialogModule and the DialogService provider
      DialogModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Rendering the Content

You can render the content of the Dialog by:

Using Templates

The Dialog allows the use of template expressions in its content area. To enable this behavior, pass a TemplateRef instance.

import { Component, TemplateRef } from '@angular/core';
import { DialogService, DialogCloseResult } from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <ng-template #itemListRef>
          <p>This action will affect {{ items.length }} items:</p>

          <ul>
              <li *ngFor="let item of items">{{ item }}</li>
          </ul>
      </ng-template>

      <button (click)="showConfirmation(itemListRef)" class="k-button">Please confirm</button>
    </div>

    <div kendoDialogContainer></div>
  `
})
export class AppComponent {
  constructor( private dialogService: DialogService ) {}

  public items = [ "Item #2", "Item #3", "Item #5", "Item #8" ];

  public showConfirmation(template: TemplateRef) {
      this.dialogService.open({
          title: "Please confirm",
          content: template,
          actions: [
              { text: "No" },
              { text: "Yes", primary: true }
          ]
      });
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DialogModule }  from '@progress/kendo-angular-dialog';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      // Import the DialogModule and the DialogService provider
      DialogModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Using Components

The Dialog also allows the rendering of component types in its content area. To enable this behavior, pass a reference to the dynamically created component in the content field of the result.

Verify that all dynamically created components are registered as entryComponents in the NgModule of the application. If the components are not registered, Angular throws a runtime error that there is no component factory for the component.

import { Component } from '@angular/core';
import { UserInfoComponent } from './user-info.component';
import { DialogService, DialogCloseResult } from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <button (click)="showConfirmation()" class="k-button k-button-icontext k-primary">
        <span class="k-icon k-i-delete"></span> Delete user
      </button>
    </div>

    <div kendoDialogContainer></div>
  `
})
export class AppComponent {
  constructor( private dialogService: DialogService ) {}

  public result;

  public showConfirmation() {
      const dialogRef = this.dialogService.open({
          title: "Please confirm",

          // Show component
          content: UserInfoComponent,

          actions: [
              { text: "Cancel" },
              { text: "Delete", primary: true }
          ]
      });

      const userInfo = dialogRef.content.instance;
      userInfo.name = "admin";
      userInfo.age = 42;
  }
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'user-info',
  template: `
    <div class="container-fluid">
      <dl class="row">
          <dt class="col-sm-6">Username:</dt>
          <dd class="col-sm-6">{{ name }}</dd>

          <dt class="col-sm-6">Age:</dt>
          <dd class="col-sm-6">{{ age }}</dd>
      </dl>
    </div>
  `
})
export class UserInfoComponent {
    @Input() public name: string;

    @Input() public age: number;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { UserInfoComponent } from './user-info.component';

import { DialogModule } from '@progress/kendo-angular-dialog';

@NgModule({
    bootstrap:       [ AppComponent ],
    declarations:    [ UserInfoComponent, AppComponent ],

    // Register the component that will be created dynamically
    entryComponents: [ UserInfoComponent ],

    imports: [
      // Import the DialogModule and the DialogService provider
      DialogModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Specifying Custom Actions

The Dialog allows you to show custom actions to the user. To enable this behavior, pass a TemplateRef instance for the actions.

import { Component, TemplateRef } from '@angular/core';
import { DialogService, DialogCloseResult } from '@progress/kendo-angular-dialog';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">

      <ng-template #dialogActions>
          <button kendoButton (click)="close()">No</button>
          <button kendoButton (click)="custom()" [icon]="loadingIcon">Yes</button>
      </ng-template>

      <button (click)="showConfirmation(dialogActions)" class="k-button">Please confirm</button>

    </div>

    <div kendoDialogContainer></div>
  `
})
export class AppComponent {
  constructor( private dialogService: DialogService ) {}

  private dialog;

  public showConfirmation(actionTemplate: TemplateRef) {
      this.dialog = this.dialogService.open({
          title: "Please confirm",
          content: "Are you sure? This action will take about 3 seconds.",
          actions: actionTemplate
      });
  }

  public close() {
    if (this.dialog) {
      this.dialog.close();
    }
  }

  public loadingIcon = "";

  public custom() {
    this.loadingIcon = "loading";

    // Mock async action
    window.setTimeout(() => {
      this.loadingIcon = "";
      this.close();
    }, 3000);
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DialogModule }  from '@progress/kendo-angular-dialog';
import { ButtonsModule }  from '@progress/kendo-angular-buttons';

@NgModule({
    bootstrap:    [ AppComponent ],
    declarations: [ AppComponent ],
    imports: [
      // Import the DialogModule and the DialogService provider
      DialogModule,

      // Import the ButtonsModule for the kendoButton directive
      ButtonsModule,

      BrowserModule,
      BrowserAnimationsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Specifying the Dialog Container

By default, the Dialog is inserted at the end of the root application element. To change this behavior, use either of the following approaches:

  • Include an element with the kendoDialogContainer directive in your application.

    <div kendoDialogContainer></div>
  • When you call the DialogService.open method, pass a ViewContainerRef instance to the appendTo property.

    import { Component, ViewChild, ViewContainerRef } from '@angular/core';
    
    import { DialogService } from '@progress/kendo-angular-dialog';
    
    @Component({
     selector: 'my-app',
     template: `
       <button kendoButton (click)="open()">Open dialog</button>
    
       <ng-container #container></ng-container>
     `
    })
    export class AppComponent {
     constructor(private dialogService: DialogService) { }
    
     @ViewChild("container", { read: ViewContainerRef })
     public containerRef: ViewContainerRef;
    
     public open() {
       this.dialogService.open({
         appendTo: this.containerRef,
    
         title: "Please confirm",
         content: "Are you sure?",
         actions: [ { text: "Yes" }, { text: "No" } ]
       });
     }
    }
In this article