To ask for confirmation before performing a delete action in ng2-dragula, you can use a combination of Angular's built-in MatDialog (Angular Material Dialog) and ng2-dragula events. The idea is to open a confirmation dialog when the user attempts to drop an item into the delete zone, and then proceed with the delete action based on the user's response.

Here's a step-by-step guide to achieve this:

  1. Set Up Angular Material Dialog: Make sure you have Angular Material installed and imported in your Angular app. If you haven't already, follow the official Angular Material installation guide:

  2. Create a Confirmation Dialog Component: Create a new Angular component for the confirmation dialog. The dialog will have two buttons, "Delete" and "Cancel," to confirm or cancel the delete action.

// confirmation-dialog.component.ts import { Component, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; @Component({ selector: 'app-confirmation-dialog', template: ` <h2 mat-dialog-title>Confirm Delete</h2> <mat-dialog-content>{{ data.message }}</mat-dialog-content> <mat-dialog-actions> <button mat-button [mat-dialog-close]="true">Delete</button> <button mat-button [mat-dialog-close]="false">Cancel</button> </mat-dialog-actions> `, }) export class ConfirmationDialogComponent { constructor( public dialogRef: MatDialogRef<ConfirmationDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: { message: string } ) {} }
  1. Use ng2-dragula and MatDialog in Your Component: In your component where you're using ng2-dragula, use Angular's MatDialog to open the confirmation dialog when the user attempts to drop an item into the delete zone.
import { Component } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { ConfirmationDialogComponent } from './confirmation-dialog.component'; @Component({ selector: 'app-draggable-list', template: ` <div class="dragula-container" [dragula]="'my-bag'" (onDrop)="onDrop($event)"> <!-- Your draggable list items go here --> </div> `, }) export class DraggableListComponent { constructor(private dialog: MatDialog) {} onDrop(event: any) { // Check if the drop zone is the delete zone if ( === 'delete-zone') { // Ask for confirmation before deleting const dialogRef =, { data: { message: 'Are you sure you want to delete this item?' }, }); dialogRef.afterClosed().subscribe((result) => { // Delete the item only if the user confirmed the action if (result === true) { // Perform the delete action here // For example, remove the item from the list // const index = this.items.indexOf(item); // this.items.splice(index, 1); } }); } } }

In this example, when the user drops an item into the delete zone, the onDrop method is called. The method opens the confirmation dialog using MatDialog, and the delete action is performed only if the user clicks the "Delete" button in the dialog.

Please note that this is a simplified example. You may need to adapt the code to your specific use case and integrate it with your existing codebase. Also, make sure to handle error scenarios and edge cases appropriately in your implementation.

Have questions or queries?
Get in Touch