All Components

Dialog Overview

The Kendo UI Dialog is an Angular component that communicates information to the user and prompts them for a response through a modal dialog. It provides an easy way to display specific content to the audience and encourages the user to take a specific action.


The following example demonstrates the default setup of the Dialog.

<kendo-dialog title="Action required">
    <p>Entropy happened.</p>
    <p>Do you accept?</p>

        <button kendoButton primary="true">Yes</button>
        <button kendoButton>No</button>


The Dialog is published as a scoped package on the on the Progress NPM Registry (

Install the package by using NPM.

To install the npm package, it is recommended to use the Node.js 5.0.0 or later versions.

   npm install --save @progress/kendo-angular-dialog

Once installed, import the DialogModule in your application bootstrap.

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

    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, DialogModule]
export class AppModule {



The title property of the Dialog defines the title the component renders.

<kendo-dialog title="Awesome title">
  No need for content, look at the awesome title!

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

    <img src="" />
    <span>Very custom, much wow.</span>

  And you thought the previous title was awesome!

The title will not be shown if it is not specified.

  <p>Subscribe to our newsletter!</p>
      <input class="k-input" placeholder="Your e-mail here" />
      <button kendoButton>I gladly accept</button>
  <p>Resistance is futile.</p>


To specify the actions of the Dialog, use the <kendo-dialog-actions> element.

<kendo-dialog title="Reassuring title">
    Do not worry, your data has not been deleted.

        <button kendoButton (click)="onDialogClose()">Keep doing that</button>
        <button kendoButton (click)="onDeleteData()">Whatever</button>


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

<kendo-dialog title="Action required" (onClose)="onDialogClose()">
    <p>Do you accept?</p>

        <button kendoButton (click)="onDialogAccept()">Yes</button>
        <button kendoButton (click)="onDialogClose()">No</button>
In this article