Modal Popup for Confirmation to delete record

Hi Jignesh

  I am getting error Cannot find name $. Do you need to install type definitions for Jquery.

Thanks

Hello Ramco,

You can create as below in a simple way, Add div for confirmation model pop up in your html,

    

        

            

                

                    
Confirmation
                    
                
                

                    Are you sure you want to delete this item?
                
                

                    Cancel
                    Delete
                
            
        
    

Add the below methods in your component,

 public itemIdToDelete : number = 0; // This field to set itemToDelete which stores ID

 // Method to open the confirmation modal
  openConfirmationModal(itemId: number) {
    // Code to set your Id
    $('#confirmationModal').modal('show'); // Assuming you're using Bootstrap modal
  }

  // Method to handle delete confirmation
  confirmDelete() {
    // Code to delete the item based on Id
    // Call your delete method here or perform deletion logic
    // Example: this.deleteItem(this.itemIdToDelete);
    $('#confirmationModal').modal('hide'); // Close the modal after deletion
  }

  // Method to delete the item
  onDelete(itemId: number) {
    // Set the id to delete here and then open the confirmation modal
    this.itemIdToDelete = itemId;
    this.openConfirmationModal();
  }

To achieve this functionality in Angular, you can utilize Angular Material Dialog component to create a modal popup for confirmation. Here's a basic implementation example:

1. First, install Angular Material in your project if you haven't already:

   ng add @angular/material
   

2. Create a confirmation dialog component that will serve as the modal popup:

   ng generate component confirmation-dialog
   

3. Inside the confirmation dialog component, design your confirmation dialog using Angular Material Dialog:

   import { Component } from '@angular/core';
   import { MatDialogRef } from '@angular/material/dialog';
   
   @Component({
     selector: 'app-confirmation-dialog',
     templateUrl: './confirmation-dialog.component.html',
   })
   export class ConfirmationDialogComponent {
     constructor(public dialogRef: MatDialogRef) {}
   
     confirmDelete(): void {
       this.dialogRef.close(true); // User confirmed deletion
     }
   
     cancelDelete(): void {
       this.dialogRef.close(false); // User canceled deletion
     }
   }
   

4. In your main component where the deletion action is triggered, open the confirmation dialog:

   import { MatDialog } from '@angular/material/dialog';
   import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
   
   constructor(private dialog: MatDialog) {}
   
   openConfirmationDialog(): void {
     const dialogRef = this.dialog.open(ConfirmationDialogComponent);
   
     dialogRef.afterClosed().subscribe((result) => {
       if (result) {
         // Proceed with deletion
         // Call your delete record function here
       } else {
         // User canceled deletion
       }
     });
   }
   

By following these steps, you can implement a modal popup for confirmation before deleting a record in Angular using Angular Material Dialog.

To get a confirmation from the user before deleting a record, you can use Angular’s built-in window.confirm() method. This method displays a dialog box with a specified message, along with an OK and a Cancel button.

Here’s a basic example of how you might implement this:

deleteRecord(record) {
  const confirmation = window.confirm('Do you really want to delete the record?');
  if (confirmation) {
    // Code to delete the record goes here
  }
}

In this example, window.confirm() will display a dialog box with the message ‘Do you really want to delete the record?’. If the user clicks OK, window.confirm() will return true and the record will be deleted. If the user clicks Cancel, window.confirm() will return false and the record will not be deleted.

Thanks