Components
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListView
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltip
    • TreeList
    • TreeView
    • Uploads
    Styling & Themes
    Common Features
    Advanced Setup

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'
    • durationAccepts 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