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

Interaction Modes

The Drawer enables you to set its initial expanded state and change it on demand by using the available API options.

Setting the Initial State

To specify the initial state of display for the Drawer, use its expanded Boolean property. By default, expanded is set to false. The property supports a two-way binding and can be programmatically updated to immediately expand or collapse the Drawer.

Example
View Source
Change Theme:

Toggling between States

The Drawer also exposes a toggle method that can be used for expanding and collapsing the component. The difference of this suggested approach from the approach for setting the initial expanded state is that the toggle method will trigger the animation, which is specified in the configuration options of the Drawer.

Example
View Source
Change Theme: