How to create searchable dropdown with angular meterial [ source code ]

template.html

      <mat-form-field appearance="fill" class="pharmacy-select">
        <mat-label>Options to select</mat-label>
        <mat-select
          [formControl]="toppings"
          (openedChange)="onDropdownOpen($event)"
          (selectionChange)="applyFilters($event)"
          [panelClass]="'select-panel'"
        >
          <mat-option>
            <input
              matInput
              #searchInput
              placeholder="Search..."
              [(ngModel)]="searchText"
              (ngModelChange)="filter()"
              (keydown)="stopDefaultSearch($event)"
              class="search-input"
            />
          </mat-option>
          <mat-option value="all">All</mat-option>
          <mat-option
            *ngFor="let topping of filteredItems"
            [value]="topping._id"
          >
            {{ topping.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>

component.ts

import { ViewChild } from '@angular/core'; 

// in component

@ViewChild('searchInput') searchInput!: ElementRef;
 searchText = ''
  allItems = [];
  filteredItems = [];
  filter(): void {
    const searchTextLower = this.searchText.toLowerCase();
    this.filteredItems = this.allItems.filter(item =>
      item.name.toLowerCase().includes(searchTextLower)
    );
  }

  onDropdownOpen(isOpen: boolean): void {
    if (isOpen && this.searchInput) {
      // Focus the search input when the dropdown opens
      this.ensureInputFocus();
    }
  }

  stopDefaultSearch(event: KeyboardEvent): void {
    // Prevent default behavior of mat-select's built-in search
    event.stopPropagation();
  }

  private ensureInputFocus(): void {
    const dropdownPanel = document.querySelector('.select-panel');
    if (dropdownPanel) {
      dropdownPanel.addEventListener('scroll', () => {
        if (this.searchInput && document.activeElement !== this.searchInput.nativeElement) {
          this.searchInput.nativeElement.focus();
        }
      });
    }
    setTimeout(() => this.searchInput.nativeElement.focus(), 0);
  }

  applyFilters(event){
  //...
  }

ngOnInit(){
this.apiService.getOptions().subscribe(res = > {
 if(Array.isArray(res)){
        this.allItems = res
        this.filteredItems = res
      }})
}

Note: Angular version 13 is used