All Components

Minimizing and Maximizing

The Window enables you to minimize and maximize it through the title bar commands.

Persisting the State

You can initially set the state of the Window and persist it by using the state binding.

@Component({
    selector: 'my-app',
    template: `
      <p><button kendoButton *ngIf="!opened" (click)="openClose(true)">Open</button></p>
      <p>The state of the Window is <b>{{windowState}}</b></p>
      <kendo-window [top]="100" [left]="50" title="Change my state" [(state)]="windowState" *ngIf="opened" (close)="openClose(false)">
        <p style="text-align: center;">I can be minimized and maximized!</p>
      </kendo-window>
    `
})
class AppComponent {
    public windowState: WindowState = 'default';
    public opened: boolean = true;

    public openClose(isOpened: boolean) {
      this.opened = isOpened;
    }
}

Preserving the Content

By default, the content of the Window is not persisted in the DOM when the Window gets minimized. To change this behavior, use the keepContent binding.

@Component({
    selector: 'my-app',
    template: `
      <p><button kendoButton *ngIf="!opened" (click)="openClose(true)">Open</button></p>
      <kendo-window [top]="100" [left]="50" title="My window" [keepContent]="true" *ngIf="opened" (close)="openClose(false)">
        <p style="text-align: center;">My content is always persisted in the DOM!</p>
      </kendo-window>
    `
})
class AppComponent {
    public opened: boolean = true;

    public openClose(isOpened: boolean) {
      this.opened = isOpened;
    }
}
In this article