New to Kendo UI for Angular? Start a free 30-day trial

DrawerComponent

Component

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

Definition

Package:@progress/kendo-angular-layout

Selector:kendo-drawer

Export Name:Accessible in templates as #kendoDrawerInstance="kendoDrawer"

Syntax:

@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' }
  ];
}

Inputs

animation?

boolean | DrawerAnimation

Specifies the animation settings of the Drawer (see example).

Default:

DEFAULT_ANIMATION

autoCollapse

boolean

Specifies if the Drawer automatically collapses when an item or the overlay is clicked.

Default:

true

expanded

boolean

Specifies the state of the Drawer.

Default:

false

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.

Default:

[]

mini

boolean

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

Default:

false

miniWidth

number

Defines the width of the Drawer when the mini view is enabled and the component is collapsed. By default, the mini view width is determined by the used Kendo Theme.