CODEWITHSUNDEEP
javascriptangularangular-filters
mohamed Arshad
mohamed Arshad

Reputation: 411

Angular dynamic checkbox Filtering implementation

thanks in advance

my Requirement is to make a custom filter with name wise search(done) and checkboxes which filters a Table's Rows(array of objects) by matching the checkbox value with the Row['tags'] (array of strings) and returns row if the tags array consist of value in a checkbox ,
The problem is that the filters(checkbox) is obtained from DB and Dynamically populated thus I cannot use ngmodel

Any implementation ideas are highly appreciated, I've seen a lot of questions with static filters and some filters using pipes but how to handle the dynamic case

so far my implementation,
Template:

<div id="searchByTag" *ngFor="let tag of tagList">
   <input
     type="checkbox"
     (change)="filterByTags(tag, $event)"
   />{{ tag }}
 </div>

Ts:

rows=[{},{}]  //from db
temp = rows    // copied when getting row from db

filterByTags(FilterTag, event) {
    if (event.target.checked) {
      const filteredRow = this.rows.filter((obj) => {
          return tag.includes(FilterTag.toLowerCase());
      });
      this.rows = filteredRow;
    } else {
      return (this.rows = this.temp);
    }
  }

a Row object:

{ 
    "xx":'yyy',
    ....,
    "tags" : [
        "org", 
        "pcb",

    ]
}

other problem is that the filtering technique currently returns only one row which matches the condition (cleared), but the main thing is the dynamic implementation of tags

Upvotes: 1

Views: 1097

Answers (1)

behruz
behruz

Reputation: 588

you can have ngModel:

if this is your checkboxes = ["org", "pcb"];

then all you need is a record to bind checkboxes values to it:

checkboxes: {[id: string]: {value: any}} = {};
for(let tag of this.tags) {
   this.checkboxes[tag] = {value: false}
}

now in your template:

<input type="checkbox" *ngFor="let item of tags" 
  [(ngModel)]="checkboxes[item].value">

you can see this in this stackblitz: stackblitz

Upvotes: 1

Related Questions