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 { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
go 
func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels
Advanced 7 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 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