I am facing a challenge with filtering data on a select element due to an overwhelming amount of options. Here is how I attempted to implement it:
<mat-form-field>
<mat-select placeholder="Unit.." (change)="onTabChange(element, $event.value.id, 'assignedUnit')">
<input matInput type="text" (keyup)="filterListCareUnit($event.target.value)">
<mat-option *ngFor="let careUnit of listCareUnits" [value]="careUnit">
{{ careUnit.label }}
</mat-option>
</mat-select>
</mat-form-field>
When the user types in a value,
filterListCareUnit($event.target.value)However, I am struggling with implementing the filter using RxJS in this function.
I have a collection named listCareUnits and my goal is to remove all objects that do not contain the value entered by the user ($event.target.value).
My current approach seems ineffective as the list remains unchanged. Here is my code snippet:
filterListCareUnit(val) {
console.log(val);
this.listCareUnits.filter((unit) => unit.label.indexOf(val));
}
As a newcomer to Angular/RxJS, any guidance or assistance would be greatly appreciated. Thank you!