Multiple Delete in table using checkbox ,Angular 2

Hello Readers,
It is the first article of the year for me, so happy New Year to all readers. Hope this year brings many successes to all of you guys and also for me. I am in love with angular and typescript .

In this article I will discuss, how to delete multiple records from the table using checkbox. I assumed that you guys already gone through the data binding and fetching the records. If not you can check it here.

So first of all I will start with creating the tasks.component.html, in this I had put one checkbox and also created (change) method, this method will be fired on selecting and deselecting of checkbox, so the logic behind the multiple delete is we create another array in which we can store the record to be deleted and then on (click) of Delete All Button pass the array to delete method which has the records to be deleted.

<div class="row">
<app-header></app-header>
</div>
<div class="container">
<div class="row">
<div [hidden]="allTasks.length>0" class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" (keyup)="0" #input1 class="form-control" placeholder="Search for...">
</div>
</div>
<div class="row">
<!---->
<table class="table">
<thead>
<th></th>
<th>Id</th>
<th>Title</th>
<th>Status</th>
<th>Action</th>
</thead>
<!---->
<tr *ngFor="let item of (allTasks|filter:input1.value|paginate: { itemsPerPage: 5, currentPage: page } )">
<td>
<input type="checkbox" (change)="checkbox(item)"></td>
<td>{{item.Id}}</td>
<td>{{item.Title}}</td>
<td><span [ngClass]="{'donestatus': item.Status=='done','pendingstatus': item.Status=='pending'}" >{{item.Status}}</span></td>
<td>
<button (click)='updateStatus(item)' type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button (click)='deleteStatus(item)' type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button></td>
</tr>
</table>
<button (click)="deleteAll()" >Click</button>
<div class="has-text-centered">
<pagination-controls (pageChange)="page = $event"></pagination-controls>
</div>
</div>
</div>

tasks.component.ts


delarr:Task[]=[];
checkbox(item:Task){
if(this.delarr.find(x=>x==item))
{
this.delarr.splice(this.delarr.indexOf(item),1)
}
else{
this.delarr.push(item);
}

}
i:number=0;

deleteAll(){
this._taskdata.deleteAll(this.delarr).subscribe(

(data:any)=>{
for(this.i=0;this.i<this.delarr.length;this.i++)
{
if(this.allTasks.find(x=>x==this.delarr[this.i]))
{
this.allTasks.splice(this.allTasks.indexOf(this.delarr[this.i]),1);
}
}

},
function(err){console.log(err);},
function(){
this.delarr=[];
console.log("Complete");
}

);
}

So, on selecting or deselecting check box, checkboxChange method will be called, Inside this method  first I am checking whether the record is already in array then remove the record from the array otherwise add the record to array. Then on Click of Delete All Button ,delete All method will be called ,In that I am simply calling my service which will call my http method which in turns  delete all the record that is passed in array from the database , so on success of the http call, will need to remove that records from our displaying array i.e. allTask otherwise it still showing on page until page got refreshed.

I also required to add method for delete in my back end which I had created in part1:

Delete All Method IN REST API

In models  folder inside task.js I added one method and named it to deleteAll


deleteAll:function(item,callback){

var delarr=[];
for(i=0;i<item.length;i++){

delarr[i]=item[i].Id;
}
return db.query("delete from task where Id in (?)",[delarr],callback);
}

I had passed the whole array to deleteAll method in body so first I am looping through the array which is retrieved from the body and separating only Id and then deleting the record from table using IN clause.

Summary:

Angular Link, Node.js Link

So in this article I had covered how to delete multiple records from table using checkbox and once again happy new year and wishing you may success in life.

Both code is available on GitHub so feel free to play with it.cheers!!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s