https://github.com/bithost-gmbh/ngx-mat-select-search
This library provides an angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.
See it in action at https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example
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.
Install ngx-mat-select-search
in your project:
npm install ngx-mat-select-search
Import the NgxMatSelectSearchModule
in your app.module.ts
:
import { MatFormFieldModule, MatSelectModule } from '@angular/material';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
@NgModule({
imports: [
ReactiveFormsModule,
BrowserAnimationsModule,
MatSelectModule,
MatFormFieldModule,
NgxMatSelectSearchModule
],
})
export class AppModule {}
Use the ngx-mat-select-search
component inside a mat-select
element:
<mat-form-field>
<mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>
<ngx-mat-select-search [formControl]="bankFilterCtrl"></ngx-mat-select-search>
<mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">
{{bank.name}}
</mat-option>
</mat-select>
</mat-form-field>
See the example in https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/app.component.html
and https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/app.component.ts
how to wire the ngx-mat-select-search
and filter the options available.
Or have a look at https://github.com/bithost-gmbh/ngx-mat-select-search-example to see it in a standalone app.
@angular/core
:^5.0.0 || ^6.0.0
,@angular/cdk
:^5.0.0 || ^6.0.0
,@angular/material
:^5.0.0 || ^6.0.0
,rxjs
:^5.5.2 || ^6.0.0
The MatSelectSearchComponent
implements the ControlValueAccessor interface.
Furthermore, it provides the following inputs:
/** Label of the search placeholder */
@Input() placeholderLabel = 'Suche';
/** 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 = false;
In order to customize the search icon, add the ngxMatSelectSearchClear
to your custom clear item (a mat-icon
or any other element) and place it inside the ngx-mat-select-search
component:
<ngx-mat-select-search>
<mat-icon ngxMatSelectSearchClear>delete</mat-icon>
</ngx-mat-select-search>
-
The search input is placed outside of the visible screen if the select element is at the top of the screen (in the stackblitz example, remove the header or add some content above the select and scroll the select to the top edge). #1
Workaround: use the disableOptionCentering option on the
<mat-select>
https://material.angular.io/components/select/api
This project was generated with Angular CLI version 1.7.1.
Contributions are welcome, please open an issue and preferrably file a pull request.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
Run npm run build-lib
to build the library and generate an NPM package.
The build artifacts will be stored in the dist-lib/
folder.
Run npm run test
to execute the unit tests via Karma.