# 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`](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/interaction_modes/initial/source.txt)

## Toggling between States

The Drawer also exposes a [`toggle`](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent#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](https://www.telerik.com/kendo-angular-ui/components/layout/drawer/interaction-modes#setting-the-initial-state) is that the `toggle` method will trigger the [`animation`](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent#animation), which is specified in the configuration options of the Drawer.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/drawer/interaction_modes/toggling/source.txt)

## Suggested Links

* [API Reference of the Drawer](https://www.telerik.com/kendo-angular-ui/components/layout/api/drawercomponent)