Angular ActionSheet - Overview
The ActionSheet UI component is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.
The following code adds a simple ActionSheet to your page. The UI component is shown on a button click.
- <dx-button
- text="Show the ActionSheet"
- (onClick)="actionSheet.visible = true">
- </dx-button>
- <dx-action-sheet
- #actionSheet
- [dataSource]="actionSheetData"
- [visible]="false">
- </dx-action-sheet>
- import { DxActionSheetModule, DxButtonModule } from "devextreme-angular";
- import notify from "devextreme/ui/notify";
- // ...
- export class AppComponent {
- actionSheetData = [
- { text: "Reply", onClick: () => { this.processClick("Reply") } },
- { text: "Reply All", onClick: () => { this.processClick("Reply All") } },
- { text: "Forward", onClick: () => { this.processClick("Forward") } },
- { text: "Delete", onClick: () => { this.processClick("Delete") } }
- ];
- processClick (name) {
- notify(name + " clicked", "success", 3000);
- }
- }
- @NgModule({
- imports: [
- // ...
- DxActionSheetModule,
- DxButtonModule
- ],
- // ...
- })
Note that every data source object has a text field that is rendered on the buttons of the ActionSheet. Also, there is the onClick field that represents a click handler for a certain ActionSheet button.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- ActionSheet - Customize Item Appearance
- ActionSheet - Specify Display Mode
- ActionSheet API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.