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.

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

      <kendo-dialog title="Action required" *ngIf="opened" (close)="close('cancel')">
          <p>Entropy happened.</p>
          <p>Do you accept?</p>

          <kendo-dialog-actions>
              <button kendoButton (click)="close('yes')" primary="true">Yes</button>
              <button kendoButton (click)="close('no')">No</button>
          </kendo-dialog-actions>
      </kendo-dialog>
    `
})
class AppComponent {
    public opened: bool = true;

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

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

Installation

  1. The Dialog package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

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

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

Dependencies

The Dialog package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs

Configuration

Title

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!
</kendo-dialog>

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

<kendo-dialog>
  <kendo-dialog-titlebar>
    <img src="http://goo.gl/OAo2Mg" />
    <span>Very custom, much wow.</span>
  </kendo-dialog-titlebar>

  And you thought the previous title was awesome!
</kendo-dialog>

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

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

Buttons

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-dialog title="Reassuring title">
            Do not worry, your data has not been deleted.

            <kendo-dialog-actions>
                <button kendoButton (click)="onDialogClose()">Keep doing that</button>
                <button kendoButton (click)="onDeleteData()">Whatever</button>
            </kendo-dialog-actions>
        </kendo-dialog>
    `
})
class AppComponent {
    public onDialogClose() {
        alert("Sure, no problem.");
    }

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

Visibility

The visibility of the Dialog can be controlled 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>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;
    }
}

Events

Closing the Dialog

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

@Component({
    selector: 'my-app',
    template: `
        <p>Status: {{ status }}</p>

        <kendo-dialog title="Action required" (close)="onClose()">
            <p>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