ng-reactive-utils

Signal-based reactive utilities for modern Angular (v20+). Convert Observable-based APIs to Signals for cleaner, more reactive code.

When to Use This Skill

Activate this skill when:

• Working with legacy Reactive Forms (FormGroup/FormControl) and need to track form/control state as signals
• Handling route parameters or query parameters in Angular
• Persisting state to localStorage or sessionStorage
• Tracking browser APIs (window size, mouse position, visibility, media queries)
• Building any Angular 20+ application that uses signals

Important: Form Composables Are for Legacy Reactive Forms Only

The form composables (useFormValue, useControlValid, etc.) are designed for existing/legacy Reactive Forms that use FormGroup, FormControl, and FormBuilder.

DO NOT use these composables as a reason to create new forms with Reactive Forms. Angular's experimental signal-based forms are the path forward for new form development.

Use form composables when:

• Maintaining or extending existing Reactive Forms code
• Migrating legacy forms incrementally to signal-based patterns
• Working in codebases that haven't adopted signal-based forms yet

For new forms, prefer Angular's signal-based forms approach when available.

Installation

npm install ng-reactive-utils

Import Pattern

All functions are exported from the main package:

import {
  useFormValid,
  useRouteParam,
  usePreviousSignal,
  useLocalStorage,
  when,
} from 'ng-reactive-utils';

API Quick Reference

Legacy Reactive Forms - FormGroup (for existing forms only)

Legacy Reactive Forms - FormControl (for existing forms only)

Route

Browser APIs

Signal Utilities

Utilities

Anti-Patterns - NEVER Do This

When ng-reactive-utils is available, NEVER use these patterns:

Usage Examples

Route Parameter Handling

@Component({
  template: `
    <h1>User: {{ userId() }}</h1>
    <tabs [activeTab]="tab()" />
  `
})
export class UserComponent {
  userId = useRouteParam('id');
  tab = useRouteQueryParam('tab');
}

Persisting State to localStorage

@Component({...})
export class SettingsComponent {
  theme = useLocalStorage<'light' | 'dark'>('app-theme', 'light');
  // theme is a WritableSignal — reads and writes sync with localStorage automatically
}

Window Size Responsive Layout

@Component({
  template: `
    @if (windowSize().width < 768) {
      <mobile-nav />
    } @else {
      <desktop-nav />
    }
  `
})
export class LayoutComponent {
  windowSize = useWindowSize();
}

Tracking Previous Values

@Component({...})
export class AnimatedComponent {
  count = signal(0);
  previousCount = usePreviousSignal(this.count);

  direction = computed(() =>
    this.count() > (this.previousCount() ?? 0) ? 'up' : 'down'
  );
}

Reacting to Signal Changes

@Component({...})
export class UploadComponent {
  uploadStatus = signal<'idle' | 'uploading' | 'complete'>('idle');

  constructor() {
    when(this.uploadStatus, (status) => status === 'complete', () => {
      this.showSuccessToast();
    });
  }
}

Legacy Reactive Forms (for existing forms only)

Use these composables when working with existing Reactive Forms code, NOT for creating new forms:

// Only use for EXISTING legacy Reactive Forms
@Component({
  template: `
    <form [formGroup]="form">
      <input formControlName="email" />
      @if (emailErrors()?.required) {
        <span>Email is required</span>
      }
      <button [disabled]="!isValid()">Submit</button>
    </form>
  `
})
export class LegacyFormComponent {
  form = inject(FormBuilder).group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', Validators.required]
  });

  isValid = useFormValid(this.form);
  emailErrors = useControlErrors(this.form.controls.email);
}

Documentation

Full documentation: https://neb636.github.io/ng-reactive-utils/

LLM-friendly docs: https://neb636.github.io/ng-reactive-utils/llms-full.txt