DrawerComponent

Represents the Kendo UI Drawer component for Angular. Provides a dismissible or permanently visible panel for navigation in responsive web applications.

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-drawer-container>
      <kendo-drawer #drawer
        [items]="items"
        mode="overlay"
        [(expanded)]="expanded">
      </kendo-drawer>
      <kendo-drawer-content>
        <button class="k-button" (click)="drawer.toggle()">Open the Drawer</button>
      </kendo-drawer-content>
    </kendo-drawer-container>
  `
})
class AppComponent {
  public expanded = false;
  public items = [
    { text: 'Inbox', icon: 'inbox' },
    { text: 'Notifications', icon: 'bell' }
  ];
}

Selector

kendo-drawer

Export Name

Accessible in templates as #kendoDrawerInstance="kendoDrawer"

Inputs

Name	Type	Default	Description
animation?	boolean | DrawerAnimation	{ type: 'slide', duration: 200 }	Specifies the animation settings of the Drawer (see example).
autoCollapse	boolean	true	Specifies if the Drawer automatically collapses when an item or the overlay is clicked.
expanded	boolean	false	Specifies the state of the Drawer.
isItemExpanded	DrawerItemExpandedFn		Defines a callback function which determines if an item should be expanded. This is useful for hierarchical data structures where the expansion state of an item depends on its parent or other items.
items	any[]	[]	Defines the collection of items that render in the Drawer.
mini	boolean	false	Enables the mini (compact) view of the Drawer which displays when the component is collapsed (see example).
miniWidth	number	50	Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
mode	DrawerMode	'overlay'	Specifies the mode in which the Drawer displays.
position	DrawerPosition	'start'	Specifies the position of the Drawer (see example).
width	number	240	Defines the width of the Drawer when it is expanded.

Events

Name	Type	Description
collapse	EventEmitter<any>	Fires when the Drawer is collapsed and its animation is complete.
expand	EventEmitter<any>	Fires when the Drawer is expanded and its animation is complete.
expandedChange	EventEmitter<boolean>	Fires when the expanded property of the component is updated. Used to provide a two-way binding for the expanded property.
select	EventEmitter<DrawerSelectEvent>	Fires when an item in the Drawer is selected. This event is preventable.

Methods

toggle
Toggles the visibility of the Drawer. If the expanded parameter is not provided, the Drawer will toggle between expanded and collapsed states.
Parameters expanded? boolean Specifies if the Drawer will be expanded or collapsed.