By default, the Dialog is visible.

To control its visibility, use the ngIf directive. To hide the Dialog, bind ngIf to a falsy value.

    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>

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

    public close() {
      this.opened = false;

    public open() {
      this.opened = true;

In this article