Angular dynamic checkbox Filtering implementation

Question

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

Can you please share your problem on stackblitz? I will help us to understand your problem and requirement. — Durgesh Pal
– Durgesh Pal, Commented Jun 26, 2020 at 8:13

behruz · Accepted Answer · 2020-06-26 07:44:33Z

1

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

answered Jun 26, 2020 at 7:44

behruz

5984 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mohamed Arshad Over a year ago

Hey Thanks, This is good but what i was actually looking for is the logic that filters ,but this will solve the problem .

Collectives™ on Stack Overflow

Angular dynamic checkbox Filtering implementation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related