How to filter items in multiple material select

Question

I want to filter on multiple select in Material2.

To do that I try to use a simple filter pipe on mat-option something like so: transform() { ... return value.filter(v => v.value === argtext); }

Here is the problem,

First, I select some items.

Then, I filter by keyword I got filtered new items.

Now I can see my previous selection has lost.

This is because Material build the options every time the filter change them. and clear the selection each time also. So My idea for using pipe it's not working for me.

This is the example with the select and the text here

1. In my example select "Extra cheese", "Sausage".
2. In the textbox type "Mushroom".
3. Select this item. (Mushroom)
4. you can see in the toppings below that only "Mushroom" selected and "Extra cheese", "Sausage" has been lost.

Thanks for reading/help

Answer 1

Instead of filtering toppingList with a pipe you can just hide options based on search input value.

Add this to style.scss:

.hide {
  display: none;
}

And in your component HTML:

   <mat-form-field>
    <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
      <mat-option *ngFor="let topping of toppingList" [class.hide]="text.value !== '' && topping.value.toLowerCase().indexOf(text.value.toLowerCase()) === -1" [value]="topping">
        {{topping.value}}
      </mat-option>
    </mat-select>
  </mat-form-field>

Updated stackblitz example