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

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




Continue reading...