multiple deletion by using check box in angular 2 - html

Question

this is the code in html page, need code for both component and service please help for this problem ** multiple deletion by using check box in angular 2 **i posted only html code but i dont know code for both components and service here the code have using single deletions but i need multiple deletions
<div class="card-content table-responsive" *ngIf="this.pagedItems!=null && this.pagedItems.length > 0">
<table class="table">
<thead>
<tr>
<th class="text-danger" style="font-weight: bold">Sl NO</th>
<!-- <th class="text-danger" style="font-weight: bold">Date</th>-->
<th class="text-danger" style="font-weight: bold">Income/Expense</th>
<th class="text-danger" style="font-weight: bold">Payment Mode</th>
<th class="text-danger" style="font-weight: bold">Debtor</th>
<th class="text-danger" style="font-weight: bold">Remarks</th>
<th class="text-danger" style="font-weight: bold">Amount</th>
<th class="text-danger" style="font-weight: bold"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of this.pagedItems | paginate: { itemsPerPage: 500, currentPage: p }; let i = index" >
<td>{{i+1}}</td>
<!-- <td>{{item.date_of_entry}}</td>-->
<td>{{item.income_expense}}</td>
<td>{{item.payment_mode}}</td>
<td>{{item.creditor_fname}}</td>
<td>{{item.remarks}}</td>
<td>{{item.amount}}</td>
<td>{{item.entry_id}}</td>
<td><input type="checkbox" name="deletecheck"></td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" title="Edit" class="btn btn-primary btn-simple btn-xs" (click) = "editSales({entryid:item.entry_id,InExp:item.income_expense,Amt:item.amount,Paymode:item.payment_mode,Debtr:item.creditor_id,Vehic:item.vechicle_no,Remarks:item.remarks})">
<i class="material-icons">edit</i>
</button>
</td>
</tr>
<button (click)="deleteSelected()">Delete</button>
</tbody>
</table>
<br>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>

Answer 1

Add an array of selected items in the component:
selectedItems: Item[];
Add another button to (de)select items:
<button type="button" rel="tooltip" title="Select" class="btn btn-info btn-simple btn-xs" (click) = "selectSales({entryid:item.entry_id})">
<i class="material-icons">close</i>
</button>
In component:
selectSales(item) {
const indexFound = this.selectedItems.indexOf(selected => selected.id === item.id;
if (indexFound > -1) {
this.selectedItems.splice(indexFound, 1);
} else {
this.selectedItems.push(item);
}
}
deleteSelected() {
this.selectedItems.forEach(item => {
// delete each item
});
}