{"id":2320,"date":"2022-07-16T18:11:24","date_gmt":"2022-07-16T13:11:24","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2320"},"modified":"2022-09-18T14:05:39","modified_gmt":"2022-09-18T09:05:39","slug":"angular13-material-select-dropdown-with-search-input-field","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/angular13-material-select-dropdown-with-search-input-field\/","title":{"rendered":"Angular 13 Material Select Dropdown with Search Input Field"},"content":{"rendered":"\n

In this tutorial, I will teach you how to make Angular Material Select\/Dropdown with Search<\/strong>. We will use NgxMatSelectSearch<\/a> Angular component. Basically, it provides an input field for searching\/filtering MatSelect<\/a> options of the Angular Material library.<\/p>\n\n\n\n

Try it yourself<\/h2>\n\n\n\n

You can try the Angular 13 Material select\/dropdown search input field<\/strong> widget online using the button given below. The complete TypeScript and HTML5 source code of this project is also given below.<\/p>\n\n\n

Live Demo<\/a><\/p>\n\n\n

Important Note<\/strong>: This project is meant as a temporary implementation of angular\/components#5697<\/a>. The goal is to have an implementation in the official Angular Material repository, once angular\/components#7835<\/a> is merged.<\/p>\n\n\n\n

How to use it?<\/h2>\n\n\n\n

Install ngx-mat-select-search<\/code> in your project:<\/p>\n\n\n\n

npm install ngx-mat-select-search<\/pre><\/div>\n\n\n\n
Import the NgxMatSelectSearchModule<\/code> e.g. in your app.module.ts<\/code>:<\/p>\n\n\n\n
import { MatSelectModule } from '@angular\/material';\nimport { NgxMatSelectSearchModule } from 'ngx-mat-select-search';\n\n@NgModule({\n  imports: [\n    ...\n    MatSelectModule,\n    NgxMatSelectSearchModule\n  ],\n})\nexport class AppModule {}<\/pre><\/div>\n\n\n\n
Use the ngx-mat-select-search<\/code> component inside a mat-select<\/code> element by placing it inside a <mat-option><\/code> element:<\/p>\n\n\n\n
<mat-form-field>\n  <mat-select [formControl]="bankCtrl" placeholder="Bank" #singleSelect>\n    <mat-option>\n      <ngx-mat-select-search [formControl]="bankFilterCtrl"><\/ngx-mat-select-search>\n    <\/mat-option>\n    <mat-option *ngFor="let bank of filteredBanks | async" [value]="bank">\n      {{bank.name}}\n    <\/mat-option>\n  <\/mat-select>\n<\/mat-form-field><\/pre><\/div>\n\n\n\n
<ngx-mat-select-search ngModel (ngModelChange)="filterMyOptions($event)"><\/pre><\/div>\n\n\n\n
<ngx-mat-select-search [formControl]="bankFilterCtrl" \n                       placeholderLabel="Find bank..." \n                       noEntriesFoundLabel="'no matching bank found'"><\/ngx-mat-select-search><\/pre><\/div>\n\n\n\n
Compatibility<\/h2>\n\n\n\n
Current release<\/strong><\/p>\n\n\n\n