Components / Layout / API

DrawerComponent

Represents the Kendo UI Drawer component for Angular.

@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? 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.

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.

items any[]

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

Events

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