All Components

Keyboard Navigation

The keyboard navigation of the Dialog is always available.

When the Dialog is opened, the initial focus is set on the primary button. This approach enables the user to immediately select or navigate between the action buttons by using the Left and Right arrow keys, and to close the Dialog with the Esc button.

SHORTCUT DESCRIPTION
Esc Closes the Dialog.
Left Arrow Moves the focus to the previous action button.
Right Arrow Moves the focus to the next action button.
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <div class="example-wrapper">
        <button kendoButton *ngIf="!opened" (click)="open()">Open dialog</button>
        <kendo-dialog title="Please confirm" *ngIf="opened" (close)="close('cancel')" [minWidth]="250" [width]="450">
            <p style="margin: 30px; text-align: center;">Are you sure you want to continue?</p>
            <kendo-dialog-actions>
                <button kendoButton (click)="close('no')">No</button>
                <button kendoButton (click)="close('yes')" primary="true">Yes</button>
            </kendo-dialog-actions>
        </kendo-dialog>
      </div>
    `
})
export class AppComponent {
    public opened: bool = true;

    public close(status) {
      console.log(`Dialog result: ${status}`);
      this.opened = false;
    }

    public open() {
      this.opened = true;
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DialogModule } 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, DialogModule, 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