Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

Operations on multiple checkbox selection and deselection in angular 4 | 5 | 6 | 7 | 8

Here we are seen how to selection and deselection done of multiple checkboxes when its comes from Rest API using angular 4 | 5 | 6 | 7 | 8.
Angular   Angular 2+   Javascript   Multiple Checkbox  

Multi Check Box Selection Deselection Using Angular


Here is some demo code of multiple checkbox html fetching groups from rest web api.

<div class="col-sm-12">
   <div class="form-group">
       <label>Select Groups</label>
       <ul class="list-unstyled mb-0">
          <li class="d-inline-block mr-2" *ngFor="let item of groupsList">
             <fieldset>
                <div class="vs-checkbox-con vs-checkbox-primary">
                   <input type="checkbox" (change)="onChange(item.TaskGroupID,$event.target.checked)" value="false">
                   <span class="vs-checkbox">
                      <span class="vs-checkbox--check">
                         <i class="vs-icon feather icon-check"></i>
                      </span>
                   </span>
                   <span class="">{{item.TaskGroupName}}</span>
                </div>
              </fieldset>
           </li>
        </ul>
    </div>
</div>


Here we need to use change function for performing selection and deselection of multiple check boxes.

We need one array which we are storing selected checkboxes and also need to truncate the checkbox which we are deselecting if we don't need.

So the above typescript code will show the onchange() function for push and pop the element from the array.


groupsArray: any[];

onChange(id: number, isChecked: boolean) {
    if (isChecked) {
      this.groupsArray.push(id);
    } else {
      const index: number = this.groupsArray.indexOf(id);
      if (index !== -1) {
        this.groupsArray.splice(index, 1);
      }
   }
}


Above code is used to push selected check box element into the array when its checked so the if condition will perform.

If deselect the selected item then else part is to find the element by using indexOf() method and splice the element from the array.


When you fetch selected checkboxes from web api and you want to display selected checkboxes the bellow code is used to change already checked checkboxes.


getItemById(Id: string): Client {
    let params: any = {};
    params.UserID = Id;
    this._clientService.getClientByID(params).subscribe(
      res => {
        var temp_arr = new Array();
        temp_arr = res.CustomerAssignGroupIds.split(",");
        this.groupsList.forEach(x=>{
          temp_arr.forEach(y=>{
            if (x.TaskGroupID == y) {
              x.IsSelected = true;
              this.groupsArray.push(parseInt(y));
            }
          });
        })
      },
      err => {
        console.log(err);
      }
    );
    return this.model;
}


The above code fetching data from web api using services and its fetched on CustomerAssignGroupIDs but it comes in string not array. If you already get array data then you do not need to create array and split string into array. Other code if the list of group id is matched with database saved group id then we are changing IsSelected to true.


Finally Done !

0replies
Leave a reply
46
Registerd Users
88
Total Subscribers
59
Total Articles
42089
Total Views