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 two-way binding and can be programmatically updated to immediately expand or collapse the Drawer.

Example
View Source
Edit In Stackblitz  
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 state is that the toggle method will trigger the animation which is specified in the configuration options of the Drawer.

Example
View Source
Edit In Stackblitz  
Change Theme: