debounced-search

name	debounced-search
description	FormControl with debounceTime pattern for search inputs. Use when implementing any search or filter input.

Skill: Debounced Search (angular-user-search)

The pattern — FormControl + debounce

searchControl = new FormControl('');

ngOnInit(): void {
  this.searchControl.valueChanges.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    takeUntil(this.destroy$)
  ).subscribe(query => this.filterItems(query ?? ''));
}

Rules

• debounceTime(300) — 300ms standard. Do not lower.
• distinctUntilChanged() — prevents redundant filter runs.
• query ?? '' — valueChanges can emit null; always coerce to string.
• The filter method takes a plain string and is synchronous.

Template binding

<input type="text" [formControl]="searchControl" aria-label="..." />

Design Constraints

• Do not use (input) or (keyup) event bindings — use FormControl.valueChanges
• Do not use ngModel — reactive forms only
• Do not debounce at less than 300ms