Components / Dialogs / Window

Getting Started with Kendo UI for Angular Window

The Window displays content in a non-modal HTML window which can be moved and resized.

Basic Usage

The following example demonstrates the Window in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper">
        <button kendoButton *ngIf="!opened" (click)="open()">Open window</button>
        <p *ngIf="dataSaved">Data has been saved</p>
        <kendo-window title="Please provide additional data" *ngIf="opened" (close)="close()" [minWidth]="250" [width]="450">

        <form class="k-form">
            <fieldset>
                <legend>User Details</legend>

                <label class="k-form-field">
                    <span>First Name</span>
                    <input class="k-textbox" placeholder="Your Name" />
                </label>
                <label class="k-form-field">
                    <span>Last Name</span>
                    <input class="k-textbox" placeholder="Your Last Name" />
                </label>
            </fieldset>

            <div class="text-right">
                <button type="button" class="k-button" (click)="close()">Cancel</button>
                <button type="button" class="k-button k-primary" (click)="submit()">Submit</button>
            </div>
        </form>

        </kendo-window>
      </div>
    `
})
export class AppComponent {
    public opened = true;
    public dataSaved = false;

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

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

    public submit() {
        this.dataSaved = true;
        this.close();
    }
}


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WindowModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, WindowModule, ButtonsModule ]
})
export class AppModule {
}

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Functionality and Features

Alternatively, the Window can be created dynamically by using an Angular service.

Events

The following example demonstrates basic Window events.

import { Component } from '@angular/core';

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

      <kendo-window [top]="100" [left]="100" title="My Window"
        *ngIf="opened"
        (dragStart)="onDragStart()"
        (dragEnd)="onDragEnd()"
        (resizeStart)="onResizeStart()"
        (resizeEnd)="onResizeEnd()"
        (stateChange)="onStateChange($event)"
        (close)="onClose()"
      >
        <p style="text-align: center;">Events are logged below</p>
      </kendo-window>
      <event-log title="Event log" [events]="events">
      </event-log>
    `
})
export class AppComponent {
    public opened = true;
    public events: string[] = [];

    public onDragStart(): void {
        this.log('Drag Start');
    }

    public onDragEnd(): void {
        this.log('Drag End');
    }

    public onResizeStart(): void {
        this.log('Resize Start');
    }

    public onResizeEnd(): void {
        this.log('Resize End');
    }

    public onStateChange(state): void {
        this.log('State Changed to ' + state);
    }

    public onClose(): void {
        this.opened = false;
        this.log('Window was closed');
    }

    public open(): void {
        this.opened = true;
        this.log('Window was opened');
    }

    private log(event: string): void {
        this.events = [event].concat(this.events);
    }
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { WindowModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent, EventLogComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, WindowModule, ButtonsModule ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article