# Interaction Modes

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

## Setting the Initial State

By default, the ActionSheet is collapsed. To expand it, set the [`expanded`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#expanded) property to `true`. The property supports a two-way binding and can be programmatically updated to immediately expand or collapse the ActionSheet without triggering the [`animation`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#animation).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/state/source.txt)

## Toggling between States

You can switch between the expanded and collapsed states of the ActionSheet with the [`toggle`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#toggle) method. This method triggers the [`animation`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#animation) of the ActionSheet, as opposed to [setting the expanded state initially](https://www.telerik.com/kendo-angular-ui/components/navigation/actionsheet/interaction#setting-the-initial-state).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/toggle/source.txt)

## Closing on Overlay Click

By default, the ActionSheet component does not collapse when clicking its overlay. To close the ActionSheet on overlay click, set the [`overlayClickClose`](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent#overlayclickclose) property of the component to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/actionsheet/overlay-click/source.txt)

## Suggested Links

* [API Reference of the ActionSheet](https://www.telerik.com/kendo-angular-ui/components/navigation/api/actionsheetcomponent)