Select

Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false,
  standalone: true,
})
export class MovieFilterPipe implements PipeTransform {
  transform(items: any[] | null, genre: string): any[] {
    if (!items) {
      return [];
    }
    if (genre && genre !== 'Select ...') {
      items = items.filter((it) => it.genre === genre);
    }
    return items;
  }
}

Template

<form [formGroup]="form" class="mb-4">
  <input type="text" [formControl]="control" placeholder="Search ..." id="searchField" class="form-control mb-4" />
  <label class="form-label" for="formGenre">Genre</label>
  <select id="formGenre" formControlName="formGenre" class="form-select">
    <option selected>Select ...</option>
    <option>Thriller</option>
    <option>Romantic</option>
    <option>Action</option>
    <option>Drama</option>
    <option>Sci-fi</option>
    <option>Comedy</option>
  </select>
</form>

<div class="card" *ngFor="let item of (items$ | async) || [] | filter : form.get('formGenre')?.value || 'Select ...'">
  <img class="card-img-top" [src]="item.image" [alt]="item.title" />
  <h4 class="card-header">{{ item.title }}</h4>
</div>