Titlebar
The Kendo UI for Angular Window titlebar displays the title and the default action buttons. Set a text title, replace the titlebar with custom markup that includes icons, or customize the titlebar buttons.
Setting a Plain Text Title
Set the title property to display a text string in the Window titlebar. Use this approach for document viewers, record editors, and panels where a static heading is sufficient.
<kendo-window title="Q4 Planning Notes"></kendo-window>The following example demonstrates a Window with meeting notes and a plain text title.
Managing Titlebar Actions
The Kendo UI for Angular Window titlebar displays the built-in Minimize, Maximize, Restore, and Close buttons. The buttons that appear depend on the state of the Window:
- The Minimize and Maximize buttons appear in the default state.
- The Restore button appears when the Window is minimized or maximized.
- The Close button appears in every state.
Each built-in button comes from its action directive: kendoWindowMinimizeAction, kendoWindowMaximizeAction, kendoWindowRestoreAction, and kendoWindowCloseAction. When you define a custom kendo-window-titlebar, the Window renders only the buttons whose directives you include. To hide a button, leave its directive out of the titlebar.
<kendo-window title="Status">
<kendo-window-titlebar>
<span class="k-window-title">Status</span>
<button kendoWindowCloseAction aria-label="Close"></button>
</kendo-window-titlebar>
</kendo-window>The following example hides the Minimize and Maximize buttons and keeps the Close button.
Adding Icons and Custom Actions
Use the kendo-window-titlebar component to add icons and custom HTML. A custom titlebar replaces the default controls, so include the action directives you want to keep, such as kendoWindowMinimizeAction, kendoWindowMaximizeAction, kendoWindowRestoreAction, and kendoWindowCloseAction.
The following template and component property show how to include a custom icon with the default Maximize, Restore, and Close controls.
<kendo-window>
<kendo-window-titlebar>
<span class="k-window-title">
<kendo-svg-icon [icon]="userIcon"></kendo-svg-icon> Edit Contact
</span>
<button kendoWindowMaximizeAction></button>
<button kendoWindowRestoreAction></button>
<button kendoWindowCloseAction></button>
</kendo-window-titlebar>
</kendo-window>The following example demonstrates a contact editor Window with an icon in the titlebar and the built-in Maximize, Restore, and Close controls.
To add a custom action to the titlebar, place a kendoButton inside the kendo-window-titlebar element and handle its click event in your application.
<kendo-window>
<kendo-window-titlebar>
<span class="k-window-title">Browse Project Files</span>
<button kendoButton fillMode="flat" [svgIcon]="folderIcon" (click)="onClick()"></button>
<button kendoWindowCloseAction></button>
</kendo-window-titlebar>
</kendo-window>The following example adds an Open folder action alongside the built-in Window controls.
Hiding the Title Text
When title is not set and no kendo-window-titlebar is defined, the Window shows the default action buttons but no title text. Use this layout when the window content serves as its own heading.
The following example shows a Window without visible title text and uses aria-label to provide an accessible name.