Angular List - Item Context Menu

If you want to offer the user a set of commands related to a List item, you can do so with the context menu. To specify the commands, use the menuItems array. Each object in this array configures a single command.

HTML
TypeScript
  • <dx-list
  • [dataSource]="fruits"
  • >
  • <div *dxTemplate="let data of 'item'">
  • <b>{{data.fruit}}</b>
  • </div>
  • <dxi-menu-item
  • text="Add to Cart"
  • [action]="addToCart">
  • </dxi-menu-item>
  • <dxi-menu-item
  • text="View Details"
  • [action]="showDetails">
  • </dxi-menu-item>
  • <dxi-menu-item
  • text="Register a Complaint"
  • [action]="complain">
  • </dxi-menu-item>
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • import notify from "devextreme/ui/notify";
  • // ...
  • export class AppComponent {
  • fruits = [
  • { fruit: "Apples", count: 10 },
  • { fruit: "Oranges", count: 12 },
  • { fruit: "Lemons", count: 15 }
  • ];
  • addToCart (e) {
  • // ...
  • notify(e.itemData.fruit + " are added to cart");
  • }
  • showDetails (e) {
  • // ...
  • }
  • complain (e) {
  • // ...
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

The user can access the commands in one of the following ways depending on the value of the menuMode property.

  • "context"
    The user right-clicks or performs a long tap on an item to open the context menu with the commands.

  • "slide"
    The user swipes an item to access the commands. If the menuItems array contains a single command, swiping the item reveals the button executing this command. If there are several commands in the menuItems array, swiping the item reveals the "More" button that opens a pop-up window with these commands.

HTML
TypeScript
  • <dx-list
  • menuMode="context"> <!-- or "slide" -->
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })
See Also