How To Delete Multiple Records From The Table Using Checkbox in Angular2

In this blog, you will learn how to delete multiple records from the table using checkbox.

It is the first article of the year for me, so Happy New Year to all readers. I hope  2017 brings many successes to all of you guys and also to 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 assume that you guys already have gone through the data binding and fetching the records. If not, you can check it out  here.

So, first of all, I will start with creating the tasks.component.html. In this, I have put one checkbox and also created (change) method. This method will be fired on selecting and deselecting of the checkbox, so the logic behind the multiple delete is that 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.

tasks.component.html

[code language = ”html”]
 < 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> < br / > < 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) = "checkboxChange(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>
[/code]

tasks.component.ts

 

[code language = ”typescript”]

1. delarr: Task[] = [];
2. checkbox(item: Task) {
3. if (this.delarr.find(x => x == item)) {
4. this.delarr.splice(this.delarr.indexOf(item), 1)
5. } else {
6. this.delarr.push(item);
7. }
8. }
9. i: number = 0;
10. deleteAll() {
11. this._taskdata.deleteAll(this.delarr).subscribe(
12. (data: any) => {
13. for (this.i = 0; this.i < this.delarr.length; this.i++) {
14. if (this.allTasks.find(x => x == this.delarr[this.i])) {
15. this.allTasks.splice(this.allTasks.indexOf(this.delarr[this.i]), 1);
16. }
17. }
18. },
19. function(err) {
20. console.log(err);
21. },
22. function() {
23. this.delarr = [];
24. console.log("Complete");
25. });
26. }
27. [/code]
    

 

 

So, on selecting or deselecting the checkbox, 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 adding the record to array. Then, on click of "Delete All" Button, "delete All methods" will be called.

 

In that, I am simply calling my service which will call my HTTP method which, in turn, deletes all the records that are passed in array from the database. So, on success of the http call, we will need to remove that record from our displaying array; i.e.,  allTask, otherwise it will still be showing on the page until the page gets refreshed.

Also, I am required to add a method for "delete" action, in my back-end which I had created in part1.

Delete All Method IN REST API

In Models folder, inside task.js, I add one method and name it as deleteAll

[code language = ”javascript”]
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);
    }
    [/code]

I have 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. Then, I am deleting the record from table using IN clause.

Summary

 Angular Link

• Node.js Link

So, in this article, I have covered how to delete multiple records from the table using checkbox.