Delete Record on Confirmation.

Question

Hi In Angular 17 using Local Storage how to delete record when User confirms O.K in Modal Popup not using Confirm function Thanks

Jignesh Kumar · Answer

Hello, Once you get your model pop-up open, in you component confirm button click method you can write below code to delete, confirmDelete(id: number) { // Filter out the student with the your selected Id for student from your student list. this.studentList = this.studentList.filter(student => student.id !== id); // Update the Local Storage data after filter specified id localStorage.setItem("angular17Crud", JSON.stringify(this.studentList)); }

Jayraj Chhaya · Answer

To achieve record deletion confirmation using a Bootstrap Modal in Angular 17 without relying on the confirm function, you can implement a custom confirmation dialog. Here's a basic example of how you can accomplish this: Create a Bootstrap Modal in your Angular component's HTML template: Are you sure you want to delete this record? Cancel Delete In your component class, handle the deletion logic: deleteRecord() { // Add your logic to delete the record from Local Storage here // For example, if your records are stored in an array named 'records': // this.records = this.records.filter(record => record.id !== recordIdToDelete); } Trigger the Bootstrap Modal when the user wants to delete a record: Delete Record By following these steps, you can implement a custom delete confirmation using a Bootstrap Modal in Angular 17 without using the standard confirm function.

Jayraj Chhaya · Answer

Hi Ramco Ramco, To achieve this in Angular 17, you can create a custom modal component for confirmation. When the user clicks the delete button, open the modal for confirmation. Upon confirmation, delete the record from Local Storage. // DeleteConfirmationComponent.ts import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-delete-confirmation', template: ` Are you sure you want to delete this record? OK ` }) export class DeleteConfirmationComponent { @Output() deleteConfirmed = new EventEmitter (); confirmDelete() { this.deleteConfirmed.emit(); } } In your parent component: // ParentComponent.ts import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` Delete Record ` }) export class ParentComponent { openConfirmation() { // Open the modal here } deleteRecord() { // Delete record from Local Storage } }

Ramco Ramco · Answer

Hi Jayraj I want delete confirmation using BootStrap Modal Thanks