• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Navigation / API / ActionSheetComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

ActionSheetComponent

Represents the Kendo UI ActionSheet component for Angular. Used to display a set of choices related to a task the user initiates.

Selector

kendo-actionsheet

Export Name

Accessible in templates as #kendoActionSheetInstance="kendoActionSheet"

Inputs

NameTypeDefaultDescription

animation

boolean | ActionSheetAnimation

true

Configures the ActionSheet opening and closing animations (see example). By default the animations are turned off. The default animations' duration is 300ms.

cssClass

any

The CSS classes that will be rendered on the inner ActionSheet element. Supports the type of values that are supported by ngClass.

expanded

boolean

false

Specifies the state of the ActionSheet.

items

ActionSheetItem[]

The collection of items that will be rendered in the ActionSheet.

subtitle

string

Specifies the text that is rendered under the title.

title

string

Specifies the text that is rendered as title.

titleId

string

Sets the aria-labelledby attribute of the ActionSheet wrapper element. Use this option when the built-in header element is replaced through the ActionSheetHeaderTemplate or ActionSheetContentTemplate.

Events

NameTypeDescription

collapse

EventEmitter<any>

Fires when the ActionSheet is collapsed and its animation is complete.

expand

EventEmitter<any>

Fires when the ActionSheet is expanded and its animation is complete.

expandedChange

EventEmitter<boolean>

Fires when the expanded property of the component is updated. Used to provide a two-way binding for the expanded property.

itemClick

EventEmitter<ActionSheetItemClickEvent>

Fires when an ActionSheet item is clicked.

overlayClick

EventEmitter<any>

Fires when the modal overlay is clicked.

Methods

toggle

Toggles the visibility of the ActionSheet.

Parameters

expanded?

boolean

In this article

Not finding the help you need?

Contact Support