0

in my project i have a case where i want to apply filters.

So when i click checkbox in filters i add that particular element to filtersApplied array.

so now i display applied filters on top in form of pills.

these pills have a cross button in them to delete the filter applied

the problem arises that there is no two way binding with array elements in checkboxes..

please help me build code for the problem and some sample codes are welcome for the title problem

shubham sharma
  • 41
  • 5

1 Answers1

0

How to apply filters to *ngFor?

<mat-chip-list>
  <mat-chip *ngFor="let filter of filters | myfilter:{active: true}" (click)="filter.active = false">{{filter.name}}</mat-chip>
</mat-chip-list>

<mat-checkbox *ngFor="let filter of filters" [(ngModle)]="filter.active">{{filter.name}}</mat-checkbox>
Tim.Burnell
  • 346
  • 1
  • 9
  • @TimBurnell its a really good answer..but one problem i find with this is that -> ngFor for mat-checkbox will be of all the filter type array and ngFor for mat-chip is of type applied filters array..how to solve that problem – shubham sharma Oct 01 '20 at 13:31
  • not quite sure what you are asking ... but if you are saying you have two arrays ... then i would run a function for add and remove that would update both arrays. That way you dont need a filter on the chips. – Tim.Burnell Oct 01 '20 at 15:16