Confirmation using Modal Form

Sign in to answer this question.

• 

  Jayraj Chhaya2y agoPosted Jun 5, 2024, 9:19 AM

  Accepted answer

  To achieve this functionality without using the confirm() function, you can create a custom confirmation modal using Angular Material Dialog. Here's a basic implementation:

  1. Create a new Angular Material Dialog component for the confirmation modal:

  2. ng generate component ConfirmationDialog
     

  3. Implement the confirmation dialog component with the necessary content and buttons for confirmation.

  4. In your component where the delete button is located, inject the MatDialog service and open the confirmation dialog when the delete button is clicked:

  5. import { MatDialog } from '@angular/material/dialog';
     import { ConfirmationDialogComponent } from 'path-to-your-confirmation-dialog-component';
     
     constructor(private dialog: MatDialog) {}
     
     openConfirmationDialog(): void {
       const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
         width: '250px',
         data: { message: 'Are you sure you want to delete?' }
       });
     
       dialogRef.afterClosed().subscribe(result => {
         if (result) {
           // Perform delete action here
         }
       });
     }
     

  6. Update your HTML template to call the openConfirmationDialog() function when the delete button is clicked:

  7. 
       delete