Пользовательский Angular Pipe для реализации фильтра списка

У меня есть Pipe для фильтрации списка

import { Pipe, PipeTransform } from '@angular/core';
import { Todo } from '../interfaces/todo';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(todo: Todo[], search = ''): Todo[] {
    if (!search.trim()) {
      return todo;
    }
    return todo.filter(t => t.title.toLowerCase().includes(search.toLowerCase()));
  }
}

Часть шаблона из компонента, где отрисовываются карточки, я указал pipe

            <ng-template #todosBlock>
        <div *ngIf="!loading; else loadingBlock">
          <div *ngIf="todos.length; else noTodos">
            <div class="card" *ngFor="let todo of todos | filter:search">
              <a routerLink="/todo/{{ todo.id }}">
                <span class="badge">{{ todo.id }}</span>
                {{ todo.title }}
              </a>
              <p>
                <span [class.completed]="todo.completed">{{todo.title}}</span>
                <span>
                  <button class="btn btn-danger" (click)="removeTodo(todo.id)">Удалить</button>
                  <button class="btn" [disabled]="todo.completed" (click)="completeTodo(todo.id)">Завершить</button>
                </span>
              </p>
            </div>
          </div>
          <ng-template #noTodos>
            <p>Нет Задач</p>
          </ng-template>
        </div>
    
        <ng-template #loadingBlock>
          <p>Загрузка...</p>
        </ng-template>
      </ng-template>

todo-search.component.html

<div id="search-component">
    <label for="search-box">Todo Search</label>
    <!-- <input placeholder="Search" #searchBox id="search-box" (input)="search(searchBox.value)" /> -->
    <input placeholder="Search" #searchBox id="search-box" [(ngModel)]="search" />
  
    <ul class="search-result">
      <li *ngFor="let todo of todos$ | async" >
        <a routerLink="/todo/{{todo.id}}">
          {{todo.title}}
        </a>
      </li>
    </ul>
</div>

@Component({
  selector: 'app-todo-search',
  templateUrl: './todo-search.component.html',
  styleUrls: ['./todo-search.component.scss']
})
export class TodoSearchComponent implements OnInit {
  todos$!: Observable<Todo[]>
  private searchTerm = new Subject<string>();
  search: string = '';

  constructor(private todoService: TodosService) { }

  ngOnInit(): void {
  //   this.todos$ = this.searchTerm
  //     .pipe(
  //       debounceTime(400),
  //       distinctUntilChanged(),
  //       switchMap(term => this.todoService.searchTodo(term))
  //     );
  // }

  // search(term: string): void {
  //   this.searchTerm.next(term);
  // }
  }
}

Но фильтрация не происходит, в чём ошибка ?