Build a cancellable Angular typeahead that cannot show stale results

Implement a standalone search component backed by SearchApi.search(query). Normalize input, wait 250 ms, ignore repeats, and cancel the previous request when a new valid query arrives. Expose idle, loading, success, empty, and error states. A failed request must not terminate future searches, and destroying the component must stop all work.

type "ang" -> request A starts
type "angular" before A completes -> A is unsubscribed; request B owns the UI
B returns [] -> empty state
next query fails -> error state; a later query still works

• Use one input stream and latest-request semantics.
• Do not nest subscriptions.
• Catch errors inside the active request branch.
• Do not send requests for fewer than two normalized characters.
• Tie subscription lifetime to the component.

1. Push input values into a subject and normalize them before comparison.
2. Debounce and ignore equivalent consecutive queries.
3. Return an idle state for short queries and a loading state followed by the active request.
4. Use switchMap so a new query unsubscribes the previous HttpClient request.
5. Catch each request failure locally and expose the stream through one reusable signal.

import {Component, inject} from '@angular/core';
import {toSignal} from '@angular/core/rxjs-interop';
import {Subject, catchError, concat, debounceTime, distinctUntilChanged, map, of, switchMap} from 'rxjs';

type Result = {id: string; label: string};
type State =
  | {kind: 'idle'}
  | {kind: 'loading'}
  | {kind: 'ready'; results: readonly Result[]}
  | {kind: 'error'; message: string};

@Component({selector: 'app-typeahead', templateUrl: './typeahead.html'})
export class Typeahead {
  private readonly api = inject(SearchApi);
  private readonly queryChanges = new Subject<string>();

  readonly state = toSignal(
    this.queryChanges.pipe(
      map(value => value.trim().toLocaleLowerCase()),
      debounceTime(250),
      distinctUntilChanged(),
      switchMap(query => {
        if (query.length < 2) return of<State>({kind: 'idle'});
        return concat(
          of<State>({kind: 'loading'}),
          this.api.search(query).pipe(
            map(results => ({kind: 'ready', results}) as State),
            catchError(() => of<State>({kind: 'error', message: 'Search is unavailable.'})),
          ),
        );
      }),
    ),
    {initialValue: {kind: 'idle'} as State},
  );

  updateQuery(value: string) {
    this.queryChanges.next(value);
  }
}

Client work is O(1) per input event plus rendering O(r) returned results. Only one active result request is subscribed at a time.

• Clearing the input returns to idle and cancels an active request.
• Equivalent queries differing only by case or surrounding whitespace do not refetch.
• A network failure is distinct from a successful empty result.
• Unsubscription stops client consumption but does not guarantee reversal of server work already accepted.

• Complete the older request after the newer request and prove its data never appears.
• Fail one request and then verify a later query succeeds.
• Destroy the fixture during loading and verify no later state update occurs.
• Advance virtual time to 249 ms and 250 ms around the debounce boundary.

• Nested subscriptions let old requests overwrite new state.
• Catching outside switchMap terminates the outer query stream.
• Converting the pipeline to a signal repeatedly creates duplicate subscriptions.
• Treating cancellation as rollback is unsafe for command endpoints.