Delete Record on Confirmation.

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:

1. Create a Bootstrap Modal in your Angular component's HTML template:

2. 
   
     
   
       
   
         
   
           Are you sure you want to delete this record?
         
         
   
           Cancel
           Delete
         
       
     
   
   

3. In your component class, handle the deletion logic:

4. 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);
   }
   

5. Trigger the Bootstrap Modal when the user wants to delete a record:

6. 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.

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

Hi Jayraj

  I want delete confirmation using BootStrap Modal

Thanks

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
  }
}