Clearing out selected value for ngx-mat-select-search

Question

I am using the "ngx-mat-select-search" npm package for angular and I am looking to provide the users of my application with a default "None" option, or after selecting an item, I would want to give the user the ability to clear out the item and have the dropdown return to its original state with only the placeholder of the input displaying.

As of now, when I select an item from the ngx-mat-select-search I cannot seem to find a way to remove that item and clear out the selection. Is there some way I can do this, maybe I am missing something?

Here is the link to the documentation/demo of the ngx-mat-select-search - click here. As you can see, once an item is selected, there seems to be no way of removing it.

Any help and/or recommendations would be appreciated.

Thank You!

Based on the documentation, can you specify which type of mat-select you're after? Is it a simple select, or a multiple selection select? — Jojofoulk

Jesse Jesse · Accepted Answer · 2019-06-04T03:53:09

The best way I've done this is to just put in a dummy "None" selection as a separate <mat-option>.

<mat-form-field>
<mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
  <mat-option>
    <ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
  </mat-option>

  <mat-option>None</mat-option>

  <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
    {{bank.name}}
  </mat-option>
</mat-select>

Because it has no value, when you select it, it just goes back to the placeholder.

This is the same method that the Material team recommends in their docs and in their corresponding stackblitz.

Clearing out selected value for ngx-mat-select-search

1 Answers