• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGrid
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetnew
    • ToolBar
    • Tooltips
    • TreeListupdated
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Dialogs / API / WindowComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

WindowComponent

Represents the Kendo UI Window component for Angular.

Selector

kendo-window

Export Name

Accessible in templates as #kendoWindowInstance="kendoWindow"

Inputs

NameTypeDefaultDescription

autoFocusedElement

string

Specifies the query selector used to set the initial focus (see examples).

draggable

boolean

true

Specifies whether the user will be able to drag the component.

height

number

Specifies the height of the Window. The height property has to be set in pixels.

keepContent

boolean

false

Specifies if the content of the component is persisted in the DOM when minimized.

left

number

Specifies the initial left offset of the Window. Numeric values are treated as pixels.

minHeight

number

100

Specifies the minimum height of the Window. The minHeight property has to be set in pixels.

minWidth

number

120

Specifies the minimum width of the component. The minWidth property has to be set in pixels.

resizable

boolean

true

Specifies whether the user will be able to resize the component.

state

WindowState

Specifies the initial state of the component. If not specified, the value is set to default.

The possible values are:

  • minimized
  • maximized
  • default

themeColor

WindowThemeColor

The Window allows you to specify predefined theme colors. The theme color will be applied as a background and border color to the titlebar while also amending the text color accordingly.

The possible values are:

  • primary
  • dark
  • light

title

string

Specifies the text that is rendered in the title bar.

top

number

Specifies the initial top offset of the Window. The top property has to be set in pixels.

width

number

Specifies the width of the Window. The width property has to be set in pixels.

Events

NameTypeDescription

close

EventEmitter<any>

Fires when the user closes the Window.

dragEnd

EventEmitter<any>

Fires when the Window was moved by the user.

dragStart

EventEmitter<any>

Fires when the user starts to move the Window.

heightChange

EventEmitter<number>

Fires when the height property of the component was updated. The event is triggered only after the resizing has ended. The event data contains the new height. Allows a two-way binding of the height property.

leftChange

EventEmitter<number>

Fires when the left property of the component was updated. The event is triggered only after the dragging and resizing have ended. The event data contains the new left offset. Allows a two-way binding of the left property.

resizeEnd

EventEmitter<any>

Fires when the Window was resized by the user.

resizeStart

EventEmitter<any>

Fires when the user starts to resize the Window.

stateChange

EventEmitter<WindowState>

Fires when the state property of the component was updated. The event data contains the new state. Allows a two-way binding of the state property.

topChange

EventEmitter<number>

Fires when the top property of the component was updated. The event is triggered only after the dragging and resizing have ended. The event data contains the new top offset. Allows a two-way binding of the top property.

widthChange

EventEmitter<number>

Fires when the width property of the component was updated. The event is triggered only after the resizing has ended. The event data contains the new width. Allows a two-way binding of the width property.

Methods

bringToFront

Brings the current Window component on top of other Window components on the page.

focus

Focuses the wrapper of the Window component.

setDimension

Manually updates the width or height option of the Window. The required style will be applied to the Window wrapper element and the corresponding property of the component instance will be updated. This method is intended to be used for sizing dynamically created components using the WindowService

Parameters

dimension

WindowDimensionSetting

The option that will be updated

value

number

The value set in pixels

setOffset

Manually updates the top or left offset of the Window. The required style will be applied to the Window wrapper element and the corresponding property of the component instance will be updated. This method is intended to be used for positioning dynamically created components using the WindowService

Parameters

offset

WindowOffsetSetting

The option that will be updated

value

number

The value set in pixels

In this article

Not finding the help you need?

Contact Support