DevExtreme Angular - Overview

The ActionSheet widget is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.

View Demo

The following code adds a simple ActionSheet to your page. The widget is shown on a button click.

HTML
TypeScript
  • <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