DialogComponent

Represents the Kendo UI Dialog component for Angular.

Use this component to display modal dialog windows in your application.

ts

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-dialog title="Example Dialog">
      <p>Dialog content goes here.</p>
    </kendo-dialog>
  `
})
export class AppComponent {}

Selector

kendo-dialog

Export Name

Accessible in templates as #kendoDialogInstance="kendoDialog"

Inputs

Name	Type	Default	Description
actions	DialogAction[]		Specifies the action buttons to render in the Dialog.
actionsLayout	ActionsLayout	'stretched'	Sets the layout of the action buttons in the Dialog. Applies only if you specify action buttons through the actions option.
animation	boolean | DialogAnimation	true	Configures the Dialog opening animation (see example). The default animation type is translate and the duration is 300ms.
autoFocusedElement	string		Sets the query selector for the element to receive initial focus. (See examples.)
height	string | number		Sets the height of the Dialog. Use a number for pixels or a string for units (for example, 50%).
maxHeight	string | number		Sets the maximum height of the Dialog. Use a number for pixels or a string for units (for example, 50%).
maxWidth	string | number		Sets the maximum width of the Dialog. Use a number for pixels or a string for units (for example, 50%).
minHeight	string | number		Sets the minimum height of the Dialog. Use a number for pixels or a string for units (for example, 50%).
minWidth	string | number		Sets the minimum width of the Dialog. Use a number for pixels or a string for units (for example, 50%).
themeColor	DialogThemeColor		Sets a predefined theme color for the Dialog. The color applies to the title bar background and border, and updates the text color.
title	string		Sets the text in the Dialog title bar.
width	string | number		Sets the width of the Dialog. Use a number for pixels or a string for units (for example, 50%).

Events

Name	Type	Description
action	EventEmitter<DialogAction>	Emits when the user clicks an action button in the Dialog. Fires only if you specify action buttons through the actions option.
close	EventEmitter<any>	Emits when the user clicks the Close button or presses the ESC key.

Methods

focus
Focuses the wrapper of the Dialog component.