All Components

Dialog Overview

The Dialog communicates information to users and prompts them for a response through a modal dialog.

It provides an easy way for displaying specific content and encourages users to take specific actions.

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. The Dialog package is published on the Progress NPM Registry. To set up your access, follow the steps in the article on getting started.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-dialog @progress/kendo-angular-l10n @angular/animations
  3. 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 the following peer dependencies that have to be installed by your application:

  • @angular/animations
  • @angular/common
  • @angular/core
  • @progress/kendo-angular-l10n
  • rxjs

Features

If created declaratively, the Dialog delivers the following features:

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

Title

To define the title that the Dialog renders, use its title property.

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

To customize the title with 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 title will not show.

<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

You can control the visibility of the Dialog through the ngIf directive. By default, the Dialog is visible. To hide it, bind the directive 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 show the dialog initially
    public opened: bool = false;

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

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

Button Content

To specify the actions of 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 the 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

On Closing the Dialog

The close event fires when the user clicks on the Close button of the Dialog.

@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