DrawerComponent

Represents the Kendo UI Drawer component for Angular.

ts

@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: any[] = [
     { text: 'Inbox', icon: 'k-i-inbox' },
     { text: 'Notifications', icon: 'k-i-bell' },
     { text: 'Date', icon: 'k-i-calendar' }
   ];
}

Selector

kendo-drawer

Export Name

Accessible in templates as #kendoDrawerInstance="kendoDrawer"

Inputs

Name	Type	Default	Description
animation?	boolean | DrawerAnimation		Specifies the animation settings of the Drawer. (see example). The possible values are: Boolean (Default) true false DrawerAnimation (Default) type?: 'slide' duration—Accepts a number in milliseconds. Defaults to 300ms.
autoCollapse	boolean		Specifies if the Drawer will be automatically collapsed when an item or the overlay is clicked. Defaults to true.
expanded	boolean		Specifies the state of the Drawer.
isItemExpanded	DrawerItemExpandedFn		Defines a callback function which determines if an item should be expanded.
items	any[]		The collection of items that will be rendered in the Drawer.
mini	boolean		Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed (see example).
miniWidth	number		Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to 60.
mode	DrawerMode		Specifies the mode in which the Drawer will be displayed. The possible values are: (Default) overlay push
position	DrawerPosition		Specifies the position of the Drawer (see example). The possible values are: (Default) start end
width	number		Defines the width of the Drawer when it is expanded. Defaults to 240.

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 was updated. Used to provide a two-way binding for the expanded property.
select	EventEmitter<DrawerSelectEvent>	Fires when a Drawer item is selected. This event is preventable.

Methods

toggle
Toggles the visibility of the Drawer.
Parameters expanded? boolean