Angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.

Try it

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.

How to use it?

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

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.

Note: it is also possible to place the <ngx-mat-select-search> element directly inside <mat-select> without wrapping it in an <mat-option> element. However, the search field might be outside of the visible viewport. See #1 and Known Problems / Solutions

Labels

In order to change the labels, use the inputs specified in the API section as follows:

...
<ngx-mat-select-search [formControl]="bankFilterCtrl" 
                       [placeholderLabel]="'Find bank...'" 
                       [noEntriesFoundLabel]="'no matching bank found'"></ngx-mat-select-search>
...

Compatibility

@angular/core: ^5.0.0 || ^6.0.0 || ^7.0.0,
@angular/cdk: ^5.0.0 || ^6.0.0 || ^7.0.0,
@angular/material: ^5.0.0 || ^6.0.0 || ^7.0.0,
rxjs: ^5.5.2 || ^6.0.0

API

The MatSelectSearchComponent implements the ControlValueAccessor interface. Furthermore, it provides the following inputs:

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;
  
  /** Disables initial focusing of the input field */
  @Input() disableInitialFocus = false;

Customize clear icon

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>

Known Problems / Solutions

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). See #1

Workaround 1: place the <ngx-mat-select-search> inside a <mat-option>
```
   <mat-select>
     <mat-option>
       <ngx-mat-select-search></ngx-mat-select-search>
     </mat-option>
     <mat-option *ngFor="let bank of ...">...</mat-option>
   </mat-select>
```
Caveat: the currently selected option might be hidden under the search input field when opening the options panel.

Workaround 2: use the disableOptionCentering option on the <mat-select> https://material.angular.io/components/select/api while placing the <ngx-mat-select-search> element directly inside <mat-select> without wrapping it in an <mat-option> element.

Support Development

We aim at providing the best service possible by constantly improving NgxMatSelectSearch and responding fast to bug reports. We do this fully free of cost. If you feel like this library was useful to you and saved you and your business some precious time, please consider making a donation to support its maintenance and further development.

rudyj / ngx-mat-select-search Goto Github PK

ngx-mat-select-search's Introduction

ngx-mat-select-search's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org