All Components

Keyboard Navigation

The keyboard navigation of the Window is always available.

The Window supports the following keyboard shortcuts:

Up Arrow Moves the Window upwards.
Down Arrow Moves the Window downwards.
Left Arrow Moves the Window to the left.
Right Arrow Moves the Window to the right.
Ctrl+Up Arrow Narrows the Window in a vertical direction.
Ctrl+Down Arrow Expands the Window in a vertical direction.
Ctrl+Left Arrow Narrows the Window in a horizontal direction.
Ctrl+Right Arrow Expands the Window in a horizontal direction.
Alt+Down Arrow Minimizes and restores the Window.
Alt+Up Arrow Maximizes and restores the Window.
Esc Closes the Window.
import { Component } from '@angular/core';

    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">
                <legend>User Details</legend>

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

            <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>

export class AppComponent {
    public opened = true;
    public dataSaved = false;

    public close() {
      this.opened = false;

    public open() {
      this.opened = true;

    public submit() {
        this.dataSaved = true;

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';

  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';


const platform = platformBrowserDynamic();
In this article