typescript 57 lines · 8 steps

Debounced search that syncs to the URL in Angular

A standalone Angular component turns keystrokes into debounced signals and mirrors the search term in the query string.

Explained by highlit

Angular Advanced signals reactive-forms debouncing url-state rxjs-interop

1import { Component, inject, effect } from '@angular/core';
2import { FormControl, ReactiveFormsModule } from '@angular/forms';
3import { ActivatedRoute, Router } from '@angular/router';
4import { toSignal } from '@angular/core/rxjs-interop';
5import { debounceTime, distinctUntilChanged, map, startWith } from 'rxjs';
6 
7@Component({
selector: 'app-product-search',
standalone: true,
imports: [ReactiveFormsModule],
template: `
  <input
    type="search"
    placeholder="Search products"
    [formControl]="query"
  />
  @if (activeQuery()) {
    <p>Showing results for “{{ activeQuery() }}”</p>
  }
`,
21})
22export class ProductSearchComponent {
private readonly route = inject(ActivatedRoute);
private readonly router = inject(Router);
25 
protected readonly query = new FormControl('', { nonNullable: true });
27 
protected readonly activeQuery = toSignal(
  this.route.queryParamMap.pipe(map((params) => params.get('q') ?? '')),
  { initialValue: '' },
);
32 
private readonly debouncedInput = toSignal(
  this.query.valueChanges.pipe(
    debounceTime(300),
    map((value) => value.trim()),
    distinctUntilChanged(),
    startWith(''),
  ),
  { initialValue: '' },
);
42 
constructor() {
  this.query.setValue(this.activeQuery(), { emitEvent: false });
45 
  effect(() => {
    const term = this.debouncedInput();
    if (term === this.activeQuery()) return;
49 
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: { q: term || null, page: null },
      queryParamsHandling: 'merge',
    });
  });
}
57}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Bridging RxJS streams to signals with toSignal lets template and effects read reactive state synchronously.
2Debouncing input before navigation avoids flooding the router with intermediate keystrokes.
3Guarding an effect against its own output prevents feedback loops when state flows both ways.

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

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

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';