I am working on a project that involves showcasing a list of participants. My goal is to set up a feature that allows filtering these participants based on different providers using checkboxes in real-time.
Below is a sample of the participants:
[
{ 'name': 'test1', 'provider' : {'name': 'provider1'}}
{ 'name': 'test2', 'provider' : {'name': 'provider2'}}
{ 'name': 'test3', 'provider' : {'name': 'provider3'}}
{ 'name': 'test4', 'provider' : {'name': 'provider1'}'}
..
]
In my HTML template, I have implemented the following checkboxes to display providers for filtering purposes:
These checkboxes can be used to filter the list of participants based on the selected providers.
<div class="form-group" *ngFor="let provider of providers">
<input type="checkbox" name="providers" value="{{ provider.name }}" [(ngModel)]="provider.checked"
(change)="displayParticipantsByProvider($event.target.value)">{{ provider.lastName }}
</div>
The actual display of the participants in the UI is handled as shown below:
<ul>
<li *ngFor="let p of participants">{{ p.name }} - {{ p.provider.name }} </li>
</ul>
Here is the filter function utilized in the component:
displayParticipantsByProvider(filterVal: any) {
if (filterVal === '0') {
this.participants = this.cathechParticipants;
} else {
this.participants = this.participants.filter((item) => item.provider.includes(filterVal));
}
}
The current implementation only allows for filtering based on a single checked item. My objective is to enhance this functionality to accommodate multiple checkboxes for filtering. How can I modify my code to achieve this, so that I can load participants based on multiple selected checkboxes?