mat-select-filter
v2.4.1
Published
https://github.com/mdlivingston
Downloads
19,733
Maintainers
Readme
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!