Issue in Delete multiple records after checbox selection angular and web api

Question

Right now this code is deleting single selected record, but unable to delete multiple records. Is there away to delete multiple selected records?

Component Html

<div class="main">
  <app-titlebar [componentName]="componentName"></app-titlebar>
  <div class="recordsWithSearchFilters">
    <div *ngIf='isRecordsFound == false' class="recordsCounter leftControl">No records found!</div>
    <div *ngIf='isRecordsFound == true' class="recordsCounter leftControl">Showing 1 to {{employees.length}} 
      (out of {{employees.length}})
    </div>

    <app-employees-filters *ngIf='isRecordsFound == true || isFiltersApplied == true'
      (moveFilteredRecordsToList)="moveFilteredRecordsToList($event)"
      (detectClearFilllterInRecordsList)="detectClearFilllterInRecordsList($event)">
    </app-employees-filters>
  </div>

  <div *ngIf='isRecordsFound == true'>
    <table class="table table-striped">
      <thead>
        <tr class="trWithSorting">
          <th style="width:30px;min-width:30px;" class="masterCheck">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" 
              id="masterCustomCheck" name="masterChk" [checked]="isAllCheckBoxChecked()" (change)="checkAllCheckBox($event)">
              <label class="custom-control-label" for="masterCustomCheck"></label>
            </div>
          </th>
          <th style="width:32px">Photo</th>
          <th style="min-width:150px;">Full Name</th>
          <th style="width:80px;">Gender </th>
          <th style="min-width:250px">Designation </th>
          <th style="width:150px;">Department </th>
          <th style="min-width:100px;">Created Date</th>
          <th style="width:100px;">Status</th>
          <th style="min-width:90px;"></th>
        </tr>
      </thead>
      <tbody id="results">
        
        <tr *ngFor="let employee of employees; let i=index; let odd = odd" [ngClass]="odd ? 'odd_col' : 'even_col'">
          <!-- <td>{{employee.id}}</td> -->
          <td>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" 
                [id]="'customCheck'+i" value="{{employee.id}}" [(ngModel)]="employees[i].checked" (ngModelChange)="changed()">
                <label class="custom-control-label" [for]="'customCheck'+i"></label>
            </div>
          </td>
          <td>
            <div *ngIf='employee.thumbnail != ""' class="img-thumbnail rowThumbnail">
              <img src='http://localhost/CorePathLaboratories/uploads/employee/{{employee.thumbnail}}'
                [alt]="employee.fullName">
            </div>
            <div *ngIf='employee.thumbnail == ""' class="img-thumbnail rowThumbnail">
              <div class="shortName" style="background-color: rgb(117, 117, 117);">
                {{employee.shortName | uppercase}}
              </div>
            </div>
          </td>
          <td>{{employee.fullName}}</td>
          <td>{{employee.gender == '0' ? "Female" : "Male"}}</td>
          <td>{{employee.designation}}</td>
          <td>{{employee.department}}</td>
          <td>{{employee.dateCreated}}</td>
          <td>
            <span class="label roundLabels" [class]="employee.status == '0' ? 'label-danger' : 'label-success'">
              {{ employee.status == '0' ? "Inactive" : "Active" }}
            </span>
          </td>
          <td class="actionControls">
            <a data-toggle="modal" data-target="#detailModal" class="icon icon-Detail-15 viewControl" [id]='employee.id'
              (click)="detailRecord($event)"></a>

            <a data-toggle="modal" data-target="#editModal" class="icon icon-Edit-14 editControl" [id]='employee.id'
              (click)="updateRecord($event)"></a>
            <a class="icon icon-Delete-27 deleteControl" [id]='employee.id' (click)="deleteRecord($event)"></a>
          </td>
        </tr>
        
      </tbody>
    </table>

    {{error}}

   
      <button type="button" class="btn btn-default" (click)="deleteProducts()">({{count}}) Delete Selected</button>
      <div style="display:none;">
        <form (ngSubmit)="deleteSelectedRecords()" [formGroup]="selectedRowsForm" *ngIf="selectedRowsForm">
        <input type="text" [value]="selectedRows" 
        formControlName="selectedItems" [(ngModel)]="selectedRows" class="allselectedRecords">
        <button data-toggle="modal" data-target="#deleteModal" 
        class="btn btn-primary sendSelectedRowsBtn" type="submit">Submit</button>
      </form>
      <!-- <pre>{{selectedRowsForm.value | json}}</pre>
      <pre>{{selectedRowsForm.status}}</pre> -->
     </div>

      <!-- <button type="button" (click)="deleteProducts()">Delete Selected Product(s)</button> -->
      <!-- <a class="btn btn-danger"><span class="selectedRecords"  style="margin-right:5px;">0</span>Delete Selected</a> -->
</div>

  </div>
</div>

Component Typescript

checkAllCheckBox(ev:any) {
        this.employees.forEach(x => x.checked = ev.target.checked)
    }

    isAllCheckBoxChecked() {
        return this.employees.every(employee => employee.checked);
    }

    deleteProducts(): void {
            const selectedProducts = this.employees.filter(employee => employee.checked).map(employee => employee.id);
            //console.log (selectedProducts);
            
            if(selectedProducts && selectedProducts.length > 0) {
                this.employeeservice.deleteProducts(selectedProducts)
                    .subscribe(res => {
                        this.clss = 'grn';
                        this.msg = 'Products successfully deleted';
                        }, err => {
                            this.clss = 'rd';
                            this.msg = 'Something went wrong during deleting products';
                        }
                    );
            } else {
                this.clss = 'rd';
                this.msg = 'You must select at least one product';
            }
      }

Service typescript

deleteProducts(ids: number[]) {
              if (confirm("Are you sure to delete?")) {
              const data = ids;
                  return this.http.get<any>(this.serverUrl + 'delete/' + data)
                .pipe( // used to combine functions in one function
                  catchError(this.handleError)
                );
              }
              return of({});
          }

Web APi Controller

<?php
    
public function delete($id)
            {
                $response = array();
                
                  $this->load->model('employee_mod');
                  $reponseFromModel = $this->employee_mod->deleteFun($id);
                  $this->session->set_flashdata("deleted", "Record deleted successfully!");
                  if($reponseFromModel == true){
                    $response = array(
                      'status' => 'success',
                      'message' => $_SESSION['deleted'],
                    );
              
                    $this->output
                      ->set_status_header(200)
                      ->set_content_type('application/json')
                      ->set_output(json_encode($response));
                  }
                }
?>

Answer 1

To delete multiple IDs in one go, you would have to expose an API that takes multiple IDs (probably as a POST body)

then instead of calling

return this.http.get<any>(this.serverUrl + 'delete/' + data)

you can call

return this.http.get<any>(this.serverUrl + 'deleteBatch/', {ids: ids})

and in the backend, you would want to read the ids from the POST body and delete based on that

$data = json_decode(file_get_contents('php://input'), true);
$ids = $data->ids
// delete each item