DrawerComponent

Represents the Kendo UI Drawer component for Angular.

Copy Code@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

animation?

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

Specifies if the Drawer will be automatically collapsed when an item or the overlay is clicked. Defaults to true.

expanded

Specifies the state of the Drawer.

mini

Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed (see example).

miniWidth

Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to 60.

mode

Specifies the mode in which the Drawer will be displayed.

The possible values are:

• (Default) overlay
• push

position

Specifies the position of the Drawer (see example).

The possible values are:

• (Default) start
• end

width

Defines the width of the Drawer when it is expanded. Defaults to 240.

items

The collection of items that will be rendered in the Drawer.

Events

collapse

Fires when the Drawer is collapsed and its animation is complete.

expand

Fires when the Drawer is expanded and its animation is complete.

expandedChange

Fires when the expanded property of the component was updated. Used to provide a two-way binding for the expanded property.

select

Fires when a Drawer item is selected. This event is preventable.

Methods

toggle

Toggles the visibility of the Drawer.

Parameters

expanded?