Modal Popup for Confirmation to delete record

Question

Hi Before deleting record in i wan to get confirmarion in popup whether user wants to delete record or not. If yes only then record should be deleted Thanks

Naimish Makwana · Answer

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

Ramco Ramco · Answer

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

Jignesh Kumar · Answer

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(); }

Jayraj Chhaya · Answer

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: First, install Angular Material in your project if you haven't already: ng add @angular/material Create a confirmation dialog component that will serve as the modal popup: ng generate component confirmation-dialog 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 } } 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.

Modal Popup for Confirmation to delete record

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)