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 { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { ValidationPipe } from '@nestjs/common';
import { ApiProperty } from '@nestjs/swagger';

Wiring validation and Swagger docs in NestJS

validation openapi decorators
Intermediate 8 steps
typescript 
import { Component, Input } from '@angular/core';
 
interface Order {
  id: string;

How Angular ICU plurals localize an order summary

i18n pluralization standalone-component
Intermediate 8 steps
typescript 
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable, catchError, concatMap, finalize } from 'rxjs';
import { DataSource, QueryRunner } from 'typeorm';
 

Wrapping requests in a transaction with NestJS

interceptors transactions rxjs
Advanced 7 steps
typescript 
type CsvColumn<T> = {
  header: string;
  value: (row: T) => string | number | boolean | null | undefined;
};

Building a type-safe CSV writer in TypeScript

generics serialization escaping
Intermediate 7 steps
typescript 
import { parsePhoneNumberFromString, CountryCode } from 'libphonenumber-js';
 
export interface NormalizedPhone {
  e164: string;

Normalizing phone numbers to E.164 in TypeScript

validation normalization error-handling
Intermediate 7 steps
typescript 
import {
  CanActivate,
  ExecutionContext,
  Injectable,

Role-based access with a NestJS guard

authorization guards decorators
Intermediate 6 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