mat-select-filter

Note: This is a fork of the original library that maintains compatibility with the latest Angular versions. The versioning follows Angular's versioning scheme (e.g., use library version 13.x.x for Angular 13.x.x projects).

• Repository: https://github.com/devLukaszMichalak/mat-select-filter
• Original repository: https://github.com/mdlivingston/mat-select-filter

A filter component for Angular Material <mat-select> drop-downs. Supports filtering arrays of strings or objects, option groups, and is compatible with both NgModule and standalone component usage.

Demo

StackBlitz Demo

Installation

npm install @devlukaszmichalak/mat-select-filter

Usage

NgModule

In module-based app import the MatSelectFilterModule

import {MatSelectFilterModule} from '@devlukaszmichalak/mat-select-filter';

@NgModule({
    ...
    imports: [MatSelectFilterModule],
    ...
})

export class AppModule { ... }

Standalone Component (since library version 17.1.0)

In standalone components import the MatSelectFilterComponent in the component's 'imports' array

import {MatSelectFilterComponent} from '@devlukaszmichalak/mat-select-filter';

@Component({
    ...
    standalone: true, // this flag is ommited in newer angular versions 
    imports: [MatSelectFilterComponent],
    ...
})

export class Component { ... }

Basic Example

<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>

or using new control flow syntax

<mat-form-field>
    <mat-select>
        <mat-select-filter [array]="variables" (filteredReturn)="filteredVariables = $event"></mat-select-filter>
        @for (variable of filteredVariables; track variable) {
            <mat-option>
                {{ variable }}
            </mat-option>
        }
    </mat-select>
</mat-form-field>

Filtering Objects

Bind a filtered array with [array] . It now accepts an array objects thanks to Sen Alexandru. If your array contains objects, specify the property to filter with [displayMember]:

variables = [
    {id: 1, name: 'Alpha'},
    {id: 2, name: 'Beta'}
];

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

Option Groups

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

To filter grouped options, use additionally [hasGroup] and [groupArrayName]:

<mat-select-filter
        [array]="groups"
        [hasGroup]="true"
        [groupArrayName]="'options'"
        [displayMember]="'name'"
        (filteredReturn)="filteredGroups = $event">
</mat-select-filter>

Inputs

Output

Features

• Works with arrays of strings or objects
• Option group support
• Customizable placeholder, color, spinner, and no-results message
• Debounced filtering
• Focuses the input on open
• Prevents propagation of alphanumeric key events to avoid selection issues

Custom Styling

You can override styles using the following CSS classes in a global css/scss file:

.mat-filter {
  // Styles the filter bar
}

.mat-filter-input {
  // Styles the input field
}

.spinner {
  // Styles the spinner
}

.no-results-message {
  // Styles the no-results message
}

Example:

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

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

License

MIT