mat-select-filter v2.4.1

mat-select-filter

Github

https://github.com/mdlivingston/mat-select-filter

Description

The mat-select-filter is a filterer for the material select drop downs. They currently do not support this so I decided to make my own.

Demo

https://stackblitz.com/edit/mat-select-filter

Install

npm

$ npm install mat-select-filter

How to use

Be sure to import into desired module:

import { MatSelectFilterModule } from 'mat-select-filter';

Next just add it to the desired material select:

<mat-form-field>
  <mat-select>
    <mat-select-filter [array]="variables" (filteredReturn)="filteredVariables = $event"></mat-select-filter>
    <mat-option *ngFor="let variable of filteredVariables">
      {{variable}}
    </mat-option>
  </mat-select>
</mat-form-field>

Send your desired filtered array using the array="variables" or array="'one', 'two', 'three'". It now accepts an array objects thanks to Sen Alexandru. To use an array of objects just specify the objects key value you want to filter using the displayMember input. For example:

var variables = [
  {
    id: 0,
    name: 'test1'
  },
    {
    id: 0,
    name: 'test1'
  }
]

<mat-form-field>
  <mat-select>
    <mat-select-filter [array]="variables" [displayMember]="'name'" (filteredReturn)="filteredVariables = $event"></mat-select-filter>
    <mat-option *ngFor="let variable of filteredVariables">
      {{variable}}
    </mat-option>
  </mat-select>
</mat-form-field>

mat-select-filter now supports option group support thanks to jenniferarce! Just input the hasGroup boolean to true and add you groupArrayName string!

The (filteredReturn) method returns the filtered results after every keyboard action while searching...

The noResultsMessage is the string you would like to display when you filter no results.

The showSpinner allows you to turn off whether or not you would like to show a loading spinner while filtering.

The placeholder text for the search box is access by:

<mat-select-filter [placeholder]="'Search..'" [array]="variables" (filteredReturn)="filteredVariables = $event"></mat-select-filter>

but it defaults to 'Search...'

To focus the search input on every click you can do something like this:

<mat-form-field>
  <mat-select #select [value]="selectedVariableName" placeholder="{{ placeholder }}">
    <mat-select-filter *ngIf="select.focused" [array]="variables" (filteredReturn)="filteredVariables = $event"></mat-select-filter>
    <mat-option *ngFor="let variable of filteredVariables">
      {{variable}}
    </mat-option>
  </mat-select>
</mat-form-field>

otherwise it will only focus once.

To add a colored background do something like this:

 <mat-select-filter [color]="'purple'" [array]="variables" (filteredReturn)="filteredVariables = $event"></mat-select-filter>

You can also change the classes from a global css/scss file in your project by adding:

.mat-filter{
  background-color: purple !important;
}

.mat-filter-input {
  border: 1px solid black !important
}

Options

• array
• color
• placeholder
• displayMember
• noResultsMessage
• showSpinner
• hasGroup
• groupArrayName
• showSpinner
• (filteredReturn)

Hope you enjoy!