Components / Dialogs / Dialog

Getting Started with Kendo UI for Angular Dialog

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')" [minWidth]="250" [width]="450">
            <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 = 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 { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

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

Functionality and Features

The Dialog can be alternatively created dynamically by using an Angular service.

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