Angular Action Sheet - Popover Mode

ActionSheet can appear at the bottom of the page or over a certain element. Enable the usePopover property to display ActionSheet over a certain element on the page and use the target property to specify this element. In this demo, ActionSheet is integrated with the List component and appears when you click a list item.

Backend API

<dx-list (onItemClick)="itemClick($event)"> @for (contact of contacts; track contact.name) { <dxi-list-item> <div>{{ contact.name }}</div> <div>{{ contact.phone }}</div> <div>{{ contact.email }}</div> </dxi-list-item> } </dx-list> <dx-action-sheet [items]="commands" title="Choose action" [usePopover]="true" [(visible)]="actionSheetVisible" [target]="actionSheetTarget" (onItemClick)="showNotify($event.itemData.text)" ></dx-action-sheet>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxActionSheetModule, DxListModule } from 'devextreme-angular'; import notify from 'devextreme/ui/notify'; import { Contact, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxActionSheetModule, DxListModule, ], }) export class AppComponent { contacts: Contact[]; commands: { text: string }[] = [ { text: 'Call' }, { text: 'Send message' }, { text: 'Edit' }, { text: 'Delete' }, ]; actionSheetVisible = false; actionSheetTarget = ''; constructor(service: Service) { this.contacts = service.getContacts(); } itemClick(e) { this.actionSheetTarget = e.itemElement; this.actionSheetVisible = true; } showNotify(text: string) { notify(`The "${text}" button is clicked.`); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #list, .demo-container { height: 100%; }

import { Injectable } from '@angular/core'; export class Contact { name: string; phone: string; email: string; category: string; } const contacts: Contact[] = [ { name: 'Barbara J. Coggins', phone: '512-964-2757', email: 'BarbaraJCoggins@rhyta.com', category: 'Family', }, { name: 'Leslie S. Alcantara', phone: '360-684-1334', email: 'LeslieSAlcantara@teleworm.us', category: 'Friends', }, { name: 'Chad S. Miles', phone: '520-573-7903', email: 'ChadSMiles@rhyta.com', category: 'Work', }, { name: 'Michael A. Blevins', phone: '530-480-1961', email: 'MichaelABlevins@armyspy.com', category: 'Work', }, { name: 'Jane K. Hernandez', phone: '404-781-0805', email: 'JaneKHernandez@teleworm.us', category: 'Friends', }, { name: 'Kim D. Thomas', phone: '603-583-9043', email: 'KimDThomas@teleworm.us', category: 'Work', }, { name: 'Donald L. Jordan', phone: '772-766-2842', email: 'DonaldLJordan@dayrep.com', category: 'Family', }, { name: 'Nicole A. Rios', phone: '213-812-8400', email: 'NicoleARios@armyspy.com', category: 'Friends', }, { name: 'Barbara M. Roberts', phone: '614-365-7945', email: 'BarbaraMRoberts@armyspy.com', category: 'Friends', }, ]; @Injectable() export class Service { getContacts(): Contact[] { return contacts; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>