typescript 56 lines · 9 steps

Reactive type-ahead search in Angular

An Angular component turns keystrokes into a debounced, cancellable GitHub search using RxJS operators.

Explained by highlit
Angular Intermediate rxjs reactive-forms debounce switchmap type-ahead
1import { Component } from '@angular/core';
2import { FormControl, ReactiveFormsModule } from '@angular/forms';
3import { HttpClient } from '@angular/common/http';
4import { AsyncPipe } from '@angular/common';
5import {
6 debounceTime,
7 distinctUntilChanged,
8 filter,
9 switchMap,
10 catchError,
11 startWith,
12} from 'rxjs/operators';
13import { Observable, of } from 'rxjs';
14 
15interface Repo {
16 id: number;
17 full_name: string;
18 description: string | null;
19}
20 
21@Component({
22 selector: 'app-repo-search',
23 standalone: true,
24 imports: [ReactiveFormsModule, AsyncPipe],
25 template: `
26 <input type="search" [formControl]="query" placeholder="Search repositories…" />
27 <ul>
28 @for (repo of results$ | async; track repo.id) {
29 <li>
30 <strong>{{ repo.full_name }}</strong>
31 <span>{{ repo.description }}</span>
32 </li>
33 }
34 </ul>
35 `,
36})
37export class RepoSearchComponent {
38 readonly query = new FormControl('', { nonNullable: true });
39 
40 readonly results$: Observable<Repo[]> = this.query.valueChanges.pipe(
41 debounceTime(300),
42 distinctUntilChanged(),
43 filter((term) => term.trim().length >= 3),
44 switchMap((term) =>
45 this.http
46 .get<{ items: Repo[] }>('https://api.github.com/search/repositories', {
47 params: { q: term, per_page: 10 },
48 })
49 .pipe(catchError(() => of({ items: [] }))),
50 ),
51 startWith({ items: [] as Repo[] }),
52 switchMap((response) => of(response.items)),
53 );
54 
55 constructor(private readonly http: HttpClient) {}
56}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Chaining debounceTime and distinctUntilChanged keeps a search input from firing redundant or premature requests.
  2. 2switchMap cancels in-flight requests when new input arrives, so late responses never overwrite fresh ones.
  3. 3Catching errors inside the inner observable keeps a single failed request from killing the whole stream.

Related explainers

typescript 
import {
  CallHandler,
  ExecutionContext,
  Injectable,

Wrapping responses in a NestJS interceptor

interceptors rxjs response-shaping
Intermediate 7 steps
typescript 
type RetryOptions = {
  retries?: number;
  timeoutMs?: number;
  baseDelayMs?: number;

Retry with timeout and backoff in TypeScript

promises retry exponential-backoff
Intermediate 10 steps
typescript 
import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers
Advanced 10 steps
typescript 
const DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
  { amount: 60, unit: "seconds" },
  { amount: 60, unit: "minutes" },
  { amount: 24, unit: "hours" },

Human-readable relative times with Intl

internationalization date-formatting lookup-table
Intermediate 7 steps
javascript 
import { useState, useEffect, useCallback, useRef } from "react";
 
export function usePersistentForm(storageKey, initialValues) {
  const [values, setValues] = useState(() => {

A React hook that persists form state to localStorage

custom-hooks localstorage debounce
Intermediate 9 steps
typescript 
function throttle<T extends (...args: any[]) => void>(
  fn: T,
  limit: number
): (...args: Parameters<T>) => void {

Building a trailing-edge throttle in TypeScript

throttling closures generics
Intermediate 7 steps

Share this explainer

Here's the card — post it anywhere.

Reactive type-ahead search in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code