Bootstrap Modal on click of delete button

Hello Ramco

You can try the sample code below to show the Bootstrap Model Popup.

    @for (item of  employeeArray;track $index){
    
        {{$index+1}}
        {{item.empName}} 
        {{item.empContactNo}}
        
            Edit
            Delete
        
    
}




  

    

      

        
Basic Modal
        
          ×
        
      
      

        
Modal Body
      
      

        Close
        Save changes
      
    
  

Thanks

Vishal Joshi

HTML Template:

    
        {{ index + 1 }}
        {{ item.empName }}
        {{ item.empContactNo }}
        
            Edit
            Delete
        
    

Typescript:

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  employeeArray: any[] = []; // Assuming this is initialized somewhere
  
  onEdit(empId: number) {
    // Edit logic
  }

  onDelete(empId: number) {
    // Delete logic
  }

  confirmDelete(empId: number) {
    if (confirm('Delete selected item?')) {
      this.onDelete(empId);
    } else {
      // Handle cancellation
    }
  }
}

To achieve using a Bootstrap modal, you'll need to set up a modal that will be triggered when the "Delete" button is clicked. If the user confirms the deletion in the modal, the record will be deleted. Here’s is samle solution.

1. Add the Bootstrap Modal HTML

2. Update the Component TypeScript

In your component's TypeScript file, add methods to handle the delete process. Store the ID of the item to be deleted when the "Delete" button is clicked, and handle the actual deletion when the user confirms it.

import { Component } from '@angular/core';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent {
  employeeArray = [
    { empId: 1, empName: 'John Doe', empContactNo: '1234567890' },
    { empId: 2, empName: 'Jane Smith', empContactNo: '0987654321' }
    // other employees
  ];
  deleteEmpId: number | null = null;

  onEdit(empId: number) {
    // Edit logic here
  }

  onDelete(empId: number) {
    this.deleteEmpId = empId;
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal')!);
    deleteModal.show();
  }

  confirmDelete() {
    if (this.deleteEmpId !== null) {
      this.employeeArray = this.employeeArray.filter(item => item.empId !== this.deleteEmpId);
      this.deleteEmpId = null;
    }
    const deleteModal = bootstrap.Modal.getInstance(document.getElementById('deleteModal')!);
    deleteModal.hide();
  }
}

3. Update the Component Template

Ensure that your table template calls the appropriate methods when buttons are clicked.

  @for (let item of employeeArray; let $index = index) {
 
    {{$index + 1}}
    {{item.empName}}
    {{item.empContactNo}}
   
      Edit
      Delete
   
 
  }

4. Add Bootstrap JavaScript

Make sure you have Bootstrap's JavaScript included in your project for the modal to work. You can include it in your angular.json file:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

This setup will display a Bootstrap modal when the user clicks the "Delete" button. If the user confirms the deletion, the record will be removed from the employeeArray.

Hi Vishal

 I don't want to use confirm. I want to use Bootstrap modal.

Thanks

Hello Ramco,

Please try the below code to get a confirmation dialog before deleting.

Delete

Thanks

Vishal Joshi