Using *ngFor, buttons are dynamically generated to filter by different values. For example, if the key 'location' has values 'west' and 'england', buttons for both 'west' and 'england' will be available for filtering.
The requirement is to enable selecting multiple filters. When 'england' is clicked, only results for 'england' are shown. Then, clicking on 'west' should display results for both 'west' and 'england' while keeping 'england' active. Currently, only one filter can be applied at a time.
A possible solution could involve assigning an active class to the button, which will update an array of active filters to send to the pipe for filtering.
Filter Button Setup
<div ngDefaultControl [(ngModel)]="filteredLocation" name="locationFilter" id="locationFilter">
<button value="All" class="m-2 btn btn-primary" type="button">All</button>
<button [class.active]="selectedIndex === i" (click)="filteredLocation = entry.location" class="m-2 btn btn-primary" type="button" *ngFor="let entry of timeLine | filterUnique; let i = index">{{entry.location}}</button>
</div>
Single Filter Implementation on Results
<div class="timeline">
<my-timeline-entry *ngFor="let entry of timeLine | filter:filteredLocation:'location'" timeEntryHeader={{entry.year}} timeEntryContent={{entry.detail}} timeEntryPlace={{entry.place}} timeEntryLocation={{entry.location}}></my-timeline-entry>
</div>
I've set up a stackBlitz demo showcasing the current behavior. You'll notice that only one filter can be applied at a time. Any suggestions or solutions would be greatly appreciated. Thank you!