All Components

Visibility

By default, the Window is visible.

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

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

      <kendo-window title="My Window" *ngIf="opened" (close)="close()">
          <p style="margin: 30px; text-align: center;">The window was opened.</p>
      </kendo-window>
    `
})
class AppComponent {
    // Do not initially show the Window
    public opened: bool = false;

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

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