https://github.com/mdlivingston
npm install mat-select-filterThe 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.
https://stackblitz.com/edit/mat-select-filter
#### npm
``
$ npm install mat-select-filter
Be sure to import into desired module:
`
import { MatSelectFilterModule } from 'mat-select-filter';
Next just add it to the desired material select:
`
{{variable}}
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'
}
]
`
{{variable}}
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:
`
but it defaults to 'Search...'
To focus the search input on every click you can do something like this:
`
{{variable}}
otherwise it will only focus once.
To add a colored background do something like this:
`
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
}
``
* [array]
* [color]
* [placeholder]
* [displayMember]
* [noResultsMessage]
* [showSpinner]
* [hasGroup]
* [groupArrayName]
* [showSpinner]
* (filteredReturn)
Hope you enjoy!