All Components

Dialog Overview

The Dialog communicates specific information and prompts users to take specific actions by interacting with a modal dialog.

Basic Usage

The following example demonstrates the Dialog in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper">
        <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
        <kendo-dialog title="Please confirm" *ngIf="opened" (close)="close('cancel')">
            <p style="margin: 30px; text-align: center;">Are you sure you want to continue?</p>
            <kendo-dialog-actions>
                <button kendoButton (click)="close('no')">No</button>
                <button kendoButton (click)="close('yes')" primary="true">Yes</button>
            </kendo-dialog-actions>
        </kendo-dialog>
      </div>
    `
})
export class AppComponent {
    public opened: bool = true;

    public close(status) {
      console.log(`Dialog result: ${status}`);
      this.opened = false;
    }

    public open() {
      this.opened = true;
    }
}

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

@NgModule({
  bootstrap:    [AppComponent],
  declarations: [AppComponent],
  imports:      [BrowserModule, BrowserAnimationsModule, DialogModule, ButtonsModule]
})
export class AppModule {
}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-angular-dialog @progress/kendo-angular-l10n @angular/animations
  2. Once installed, import the DialogModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { DialogModule } from '@progress/kendo-angular-dialog';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, BrowserAnimationsModule, DialogModule]
    })
    export class AppModule {
    }

Dependencies

The Dialog package requires you to install the following peer dependencies in your application:

  • @angular/animations
  • @angular/common
  • @angular/core
  • @progress/kendo-angular-l10n
  • rxjs
  • The version of the @angular/animations module has to be exactly the same as the version of the other @angular modules that are included in your project. To sync the package versions, you might need to run npm update.
  • The Dialog package utilizes the Angular animation system, which supports a specific set of browsers.

Features

When created declaratively, the Dialog delivers the following features:

Alternatively, the Dialog can be created dynamically by using an Angular service.

Title

To set a title to the Dialog, use its title property.

<kendo-dialog title="Awesome title goes here">
</kendo-dialog>

To customize the title by adding arbitrary components, nest them inside <kendo-dialog-titlebar>.

<kendo-dialog>
  <kendo-dialog-titlebar>
    <div style="font-size: 18px; line-height: 1.3em;">
      <span class="k-icon k-i-print"></span> Print this page
    </div>
  </kendo-dialog-titlebar>

    <p style="margin: 30px; text-align: center;">A sample print dialog.</p>
</kendo-dialog>

If not specified, the Dialog will not display a title.

<kendo-dialog>
  <div style="text-align: center; margin: 30px;">
    <h4>Enter your e-mail below to unlock.</h4>
    <p>
      <input class="k-textbox" placeholder="Your e-mail here" style="width: 300px;" />
    </p>
    <p>
      <button kendoButton primary="true" style="width: 300px;">GET MY $10 OFF</button>
    </p>
    <a href="#">No thanks!</a>
  </div>
</kendo-dialog>

Visibility

To control the visibility of the Dialog, use the ngIf directive. By default, the component is visible. To hide it, bind ngIf to a falsy value.

@Component({
    selector: 'my-app',
    template: `
      <button kendoButton *ngIf="!opened" (click)="open()">Do not click this button</button>

      <kendo-dialog title="Oh no!" *ngIf="opened" (close)="close()">
          <p style="margin: 30px; text-align: center;">The button was clicked.</p>

          <kendo-dialog-actions>
              <button kendoButton (click)="close()" [primary]="true">Yes, sorry.</button>
          </kendo-dialog-actions>
      </kendo-dialog>
    `
})
class AppComponent {
    // Do not initially show the Dialog
    public opened: bool = false;

    public close() {
      this.opened = false;
    }

    public open() {
      this.opened = true;
    }
}

Button Content

To specify the action buttons in the Dialog, use the <kendo-dialog-actions> element.

@Component({
    selector: 'my-app',
    template: `
      <kendo-dialog>
        <kendo-dialog-titlebar>
          <div style="font-size: 18px; line-height: 1.3em;">
            <span class="k-icon k-i-warning"></span> Delete Data
          </div>
        </kendo-dialog-titlebar>
        <p style="margin: 30px; text-align: center;">This action cannot be undone.</p>

        <kendo-dialog-actions>
          <button kendoButton (click)="onDialogClose()">Cancel</button>
          <button kendoButton (click)="onDeleteData()" primary="true">Delete</button>
        </kendo-dialog-actions>
      </kendo-dialog>
    `
})
class AppComponent {
    public onDialogClose() {
        alert("No data deleted.");
    }

    public onDeleteData() {
        alert("Data deleted.");
    }
}

Dimensions

To specify the dimensions of the Dialog, use its width and height bindings.

@Component({
    selector: 'my-app',
    template: `
      <kendo-dialog [width]="400" [height]="300" [title]="Status">
        <p style="text-align: center; padding-top: 5em;">Your escape pod is now ready.</p>

        <kendo-dialog-actions>
          <button kendoButton primary="true">Launch!</button>
        </kendo-dialog-actions>
      </kendo-dialog>
    `
})
class AppComponent {
}

Events

The following example demonstrates basic Dialog events.

@Component({
    selector: 'my-app',
    template: `
      <div class="example-config">
        <h4>Status: {{ status }}</h4>
      </div>

      <kendo-dialog title="Action required" (close)="onClose()">
        <p style="margin: 30px; text-align: center;">Do you accept?</p>

        <kendo-dialog-actions>
          <button kendoButton (click)="onAccept()">Yes</button>
          <button kendoButton (click)="onDecline()">No</button>
        </kendo-dialog-actions>
      </kendo-dialog>
    `
})
class AppComponent {
    public status = "open";

    public onClose() { this.status = "closed"; }
    public onAccept() { this.status = "accepted"; }
    public onDecline() { this.status = "declined"; }
}
In this article