Angular 13 Material Select Dropdown with Search Input Field

0Shares

In this tutorial, 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

Live Demo

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>();

0Shares

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.