Angular: add search functionality to dynamically created mat select dropdowns

Question

I am working on an Angular project where I'm rendering dynamic mat-select dropdowns (returned by query). Below is the code to render these mat-selects.

HTML: -

<div class="col-sm-12" *ngFor="let subGenreDropDown of lstSubGenreDropDown; let i = index">
        <mat-form-field class="example-form-field">
          <mat-label>Sub Genre {{i+1}}</mat-label>
          <mat-select #subGenreDropdownElement [(ngModel)]="subGenreDropDown.filmSubGenreAliasId" class="dropdown-design subGenreDropdownElement" name="subGenre{{i+1}}">
            <mat-option *ngFor="let o of lstSubGenre" [value]="o.filmSubGenreAliasId">{{o.subGenre}}</mat-option>
          </mat-select>         
        </mat-form-field>
 </div>

Component: -

export class FilmSubGenre {
  filmSubGenreMapId: number;
  filmSubGenreAliasId: number;
  subGenre: string;
}

lstSubGenreDropDown: FilmSubGenre[] = [{filmSubGenreMapId: 1, filmSubGenreAliasId: 1, subGenre: 'Option 1'}, {filmSubGenreMapId: 2, filmSubGenreAliasId: 3, subGenre: 'Option 3'}];
lstSubGenre: FilmSubGenre[] = [{filmSubGenreMapId: 0, filmSubGenreAliasId: 1, subGenre: 'Option 1'}, {filmSubGenreMapId: 0, filmSubGenreAliasId: 2, subGenre: 'Option 2'}, {filmSubGenreMapId: 0, filmSubGenreAliasId: 3, subGenre: 'Option 3'}];

I want to add a search textbox in each of these dropdowns which can be used to filter them accordingly. As all these dropdowns have same list, I'm not sure how to add the search functionality that would filter the particular dropdown only. TIA.