In this tutorial, I will teach you how to make Angular Material Select/Dropdown with Search. We will use NgxMatSelectSearch Angular component. Basically, it provides an input field for searching/filtering MatSelect options of the Angular Material library.
Try it yourself
You can try the Angular 13 Material select/dropdown search input field widget online using the button given below. The complete TypeScript and HTML5 source code of this project is also given below.
Important Note: This project is meant as a temporary implementation of angular/components#5697. The goal is to have an implementation in the official Angular Material repository, once angular/components#7835 is merged.
How to use it?
Install ngx-mat-select-search in your project:
npm install ngx-mat-select-search
Import the NgxMatSelectSearchModule e.g. in your app.module.ts:
import { MatSelectModule } from '@angular/material';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
@NgModule({
imports: [
...
MatSelectModule,
NgxMatSelectSearchModule
],
})
export class AppModule {}Use the ngx-mat-select-search component inside a mat-select element by placing it inside a <mat-option> element:
<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 *ngFor="let bank of filteredBanks | async" [value]="bank">
{{bank.name}}
</mat-option>
</mat-select>
</mat-form-field><ngx-mat-select-search ngModel (ngModelChange)="filterMyOptions($event)">
<ngx-mat-select-search [formControl]="bankFilterCtrl"
placeholderLabel="Find bank..."
noEntriesFoundLabel="'no matching bank found'"></ngx-mat-select-search>Compatibility
Current release
- @angular/core: ^12.0.0 || ^13.0.0 || ^14.0.0
- @angular/material: ^12.0.0 || ^13.0.0 || ^14.0.0
Version 3.3.3
- @angular/core: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
- @angular/material: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
Version 1.8.0
- @angular/core: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
- @angular/material: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
API
The MatSelectSearchComponent implements the ControlValueAccessor interface. Furthermore, it provides the following inputs:
Inputs
/** Label of the search placeholder */
@Input() placeholderLabel = 'Suche';
/** Type of the search input field */
@Input() type = 'text';
/** Font-based icon used for displaying Close-Icon */
@Input() closeIcon = 'close';
/** Svg-based icon used for displaying Close-Icon. If set, closeIcon is overridden */
@Input() closeSvgIcon?: string;
/** Label to be shown when no entries are found. Set to null if no message should be shown. */
@Input() noEntriesFoundLabel = 'Keine Optionen gefunden';
/**
* Whether or not the search field should be cleared after the dropdown menu is closed.
* Useful for server-side filtering. See [#3](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/3)
*/
@Input() clearSearchInput = true;
/** Whether to show the search-in-progress indicator */
@Input() searching = false;
/** Disables initial focusing of the input field */
@Input() disableInitialFocus = false;
/** Enable clear input on escape pressed */
@Input() enableClearOnEscapePressed = false;
/**
* Prevents home / end key being propagated to mat-select,
* allowing to move the cursor within the search input instead of navigating the options
*/
@Input() preventHomeEndKeyPropagation = false;
/** Disables scrolling to active options when option list changes. Useful for server-side search */
@Input() disableScrollToActiveOnOptionsChanged = false;
/** Adds 508 screen reader support for search box */
@Input() ariaLabel = 'dropdown search';
/** Whether to show Select All Checkbox (for mat-select[multi=true]) */
@Input() showToggleAllCheckbox = false;
/** select all checkbox checked state */
@Input() toggleAllCheckboxChecked = false;
/** select all checkbox indeterminate state */
@Input() toggleAllCheckboxIndeterminate = false;
/** Display a message in a tooltip on the toggle-all checkbox */
@Input() toggleAllCheckboxTooltipMessage = '';
/** Define the position of the tooltip on the toggle-all checkbox. */
@Input() toogleAllCheckboxTooltipPosition: 'left' | 'right' | 'above' | 'below' | 'before' | 'after' = 'below';
/** Show/Hide the search clear button of the search input */
@Input() hideClearSearchButton = false;
/**
* Always restore selected options on selectionChange for mode multi (e.g. for lazy loading/infinity scrolling).
* Defaults to false, so selected options are only restored while filtering is active.
*/
@Input() alwaysRestoreSelectedOptionsMulti = false;
/**
* Text that is appended to the currently active item label announced by screen readers, informing the user of the current index, value and total
* options.
* eg: Bank R (Germany) 1 of 6
*/
@Input() indexAndLengthScreenReaderText = ' of ';
/** Output emitter to send to parent component with the toggle all boolean */
@Output() toggleAll = new EventEmitter<boolean>();
Conclusion
If you want to add a searchable select dropdown in your Angular app then the above source code will be very helpful. Basically, we used the NgxMatSelectSearch Angular component to seach/filter data inside a dropdown whereas for designing we used Google Material design library.