todo-list.component.ts

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoListComponent implements OnInit {
  public todos$: Observable<Todo[]>;
  public searchForm = new FormControl('');
    
  constructor(private todoService: TodoService) {}

  ngOnInit(): void {
    this.todos$ = this.searchForm.valueChanges.pipe(
      distinctUntilChanged(),
      debounceTime(300),
      switchMap(search => this.todoService.getTodos(search))
    );
  }

}