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

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';