typescript 48 lines · 8 steps

Autosaving a form with RxJS in Angular

An Angular component turns form changes into a debounced, self-cleaning autosave pipeline with a live status signal.

Explained by highlit

Angular Advanced reactive-forms rxjs-operators debouncing subscription-cleanup signals

1@Component({
selector: 'app-article-editor',
templateUrl: './article-editor.component.html',
4})
5export class ArticleEditorComponent implements OnInit, OnDestroy {
@Input() articleId!: string;
7 
readonly form = this.fb.nonNullable.group({
  title: ['', Validators.required],
  summary: [''],
  body: [''],
});
13 
readonly saveState = signal<'idle' | 'saving' | 'saved' | 'error'>('idle');
15 
private readonly destroy$ = new Subject<void>();
17 
constructor(
  private readonly fb: FormBuilder,
  private readonly drafts: DraftService,
) {}
22 
ngOnInit(): void {
  this.form.valueChanges
    .pipe(
      filter(() => this.form.valid),
      map(() => this.form.getRawValue()),
      debounceTime(800),
      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
      tap(() => this.saveState.set('saving')),
      switchMap((draft) =>
        this.drafts.save(this.articleId, draft).pipe(
          catchError(() => {
            this.saveState.set('error');
            return EMPTY;
          }),
        ),
      ),
      takeUntil(this.destroy$),
    )
    .subscribe(() => this.saveState.set('saved'));
}
43 
ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}
48}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Chaining RxJS operators lets you express debounce, dedupe, and cancellation as one declarative pipeline.
2switchMap plus catchError keeps a save stream alive by cancelling stale requests and swallowing errors without breaking the observable.
3A destroy Subject with takeUntil is a reliable pattern for tearing down subscriptions when a component is destroyed.

Related explainers

typescript

type CountdownState = {
  deadline: number;
  onTick: (remaining: number) => void;
  onComplete: () => void;

A countdown timer that survives reloads

persistence timers localstorage

Intermediate 10 steps

typescript

type QueuedRequest = {
  id: string;
  url: string;
  method: string;

A retry queue with exponential backoff

retry exponential-backoff persistence

Intermediate 10 steps

typescript

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { ConfigService } from '@nestjs/config';

How a JWT strategy authenticates in NestJS

authentication jwt passport

Intermediate 7 steps

typescript

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, take, switchMap } from 'rxjs/operators';

Refreshing auth tokens in an Angular interceptor

http-interceptor token-refresh rxjs

Advanced 8 steps

python

from django.contrib.postgres.search import SearchQuery, SearchRank, SearchVector
from django.core.cache import cache
from django.db.models import F
from django.http import JsonResponse

Ranked full-text search in Django

full-text-search debouncing caching

Advanced 9 steps

typescript

import { CanActivate, ExecutionContext, Injectable, UnauthorizedException } from '@nestjs/common';
import { GqlExecutionContext } from '@nestjs/graphql';
import { Reflector } from '@nestjs/core';
import { JwtService } from '@nestjs/jwt';