Filter on a mat-select

Question

I need to filter data on a select because there is too much options. I did it like this :

        <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>

on key up, i'm calling filterListCareUnit($event.target.value)

but in this function i don't know to use the filter rxjs

I have my listCareUnits and I want to remove all object which don't contains the $event.target.value

for now I did this but clearly don't work, my list always contains the same items :

  filterListCareUnit(val) {
    console.log(val);
    this.listCareUnits.filter((unit) => unit.label.indexOf(val));
  }

Newbie at angular/rxjs .. Thanks for the help

Answer 1

You have to assign the returned filtered list.

 filterListCareUnit(val) {
    console.log(val);
    this.listCareUnits = this.listCareUnits.filter((unit) => unit.label.indexOf(val) > -1);
  }

But in order not to lose the data of your initial array, it will be better to use another array for processing that will always contain your initial set of data.

anotherArray = this.listCareUnits;
filterListCareUnit(val) {
        console.log(val);
        this.listCareUnits = this.anotherArray.filter((unit) => unit.label.indexOf(val) > -1);
      }