Angular 13 Material Select Dropdown with Search Input Field

npm install ngx-mat-select-search

import { MatSelectModule } from '@angular/material';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';

@NgModule({
  imports: [
    ...
    MatSelectModule,
    NgxMatSelectSearchModule
  ],
})
export class AppModule {}

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

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