Search + Select

Pipe

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

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

    if (searchText) {
      searchText = searchText.toLowerCase();
      items = items.filter((it) => it.title.toLowerCase().includes(searchText));
    }

    if (genre && genre !== 'Select ...') {
      items = items.filter((it) => it.genre === genre);
    }

    return items;
  }
}

Template

<app-add-movie *ngIf="isEditing" [isEditing]="isEditing" [movieToEdit]="movieToEdit" (finished)="onFinishEditing()"></app-add-movie>
<h2>Filter</h2>
<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>
<h2>Movies</h2>
<div class="movies grid-4">
  <div class="card" *ngFor="let item of (items$ | async) || [] | filter : control.value : form.get('formGenre')?.value || 'Select ...'">
    <img class="card-img-top" [src]="item.image ? item.image : placeholder" [alt]="item.title" />
    <h4 class="card-header">{{ item.title }}</h4>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Year: {{ item.year }}</li>
      <li class="list-group-item">Genre: {{ item.genre }}</li>
      <li class="list-group-item">IMDb Rating: {{ item.imdb }}</li>
    </ul>
    <div class="card-footer">
      <button (click)="onEdit(item)" type="button" class="btn btn-warning">Edit</button>
      <button (click)="onDelete(item.id)" type="button" class="btn btn-danger">Delete</button>
    </div>
  </div>
</div>