Angular Signals Pattern

Manage reactive state with Angular Signals — signal(), computed(), effect(), and toSignal() — for fine-grained, zone-free reactivity

When to Use

• Building new components in Angular 17+ that need reactive local state
• Replacing

  BehaviorSubject

  +

  async

  pipe patterns with simpler signal-based state
• Deriving display values from multiple state pieces without manual subscription management
• Bridging RxJS observables into signal-based components via

  toSignal()

• Preparing for zoneless change detection (Angular 18+)

Instructions

1. Create mutable state with

   signal<T>(initialValue)

   . The returned

   WritableSignal<T>

   exposes

   .set()

   ,

   .update()

   , and

   .mutate()

   (arrays/objects).
2. Derive values with

   computed(() => ...)

   . Computed signals are lazy and memoized — they only recompute when their dependencies change. Never compute inside a template expression; use

   computed()

   instead.
3. Run side effects with

   effect(() => ...)

   . Effects re-run automatically when any signal they read changes. Clean up resources by returning a cleanup function or using the

   onCleanup

   callback.
4. Convert an RxJS

   Observable

   to a signal with

   toSignal(obs$, { initialValue: ... })

   . This subscribes for you and unsubscribes on destroy. Provide

   initialValue

   to avoid the

   undefined

   initial state.
5. Convert a signal to an Observable with

   toObservable(sig)

   when you need to compose it with RxJS operators.
6. Prefer signal inputs (

   input()

   ) over

   @Input()

   for new components — they integrate with the reactivity graph natively.
7. Do not call

   .set()

   or

   .update()

   inside a

   computed()

   — computed signals must be pure.
8. Wrap mutable signal state in a service when it needs to be shared across components.

import { Component, signal, computed, effect, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { ProductService } from './product.service';

@Component({
  selector: 'app-cart',
  template: `
    <p>Items: {{ itemCount() }}</p>
    <p>Total: {{ formattedTotal() }}</p>
    <button (click)="addItem(selectedProduct())">Add</button>
  `,
})
export class CartComponent {
  private productService = inject(ProductService);

  // Convert observable to signal — auto-unsubscribed on destroy
  selectedProduct = toSignal(this.productService.selected$, {
    initialValue: null,
  });

  items = signal<CartItem[]>([]);

  itemCount = computed(() => this.items().length);

  total = computed(() => this.items().reduce((sum, item) => sum + item.price * item.qty, 0));

  formattedTotal = computed(() =>
    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(this.total())
  );

  constructor() {
    // Side effect: persist cart to localStorage whenever items change
    effect(() => {
      localStorage.setItem('cart', JSON.stringify(this.items()));
    });
  }

  addItem(product: Product | null): void {
    if (!product) return;
    this.items.update((items) => [...items, { ...product, qty: 1 }]);
  }
}

Details

Signal vs BehaviorSubject: A

BehaviorSubject

requires

.subscribe()

,

.next()

, and

.unsubscribe()

(or

takeUntil

). A

WritableSignal

has no subscription overhead and integrates with Angular's change detection graph directly. Signals also compose with

computed()

without the

combineLatest

ceremony required by observables.

Lazy computation:

computed()

is lazy and cached. If no consumer reads the computed signal, it never runs. If the dependencies haven't changed since last read, the cached value is returned without re-running the function. This makes computed signals safe to use in templates even for expensive derivations.

Effect cleanup: Effects that set up subscriptions, timers, or DOM listeners should clean up on re-run:

effect((onCleanup) => {
  const id = setInterval(() => this.tick.update((t) => t + 1), 1000);
  onCleanup(() => clearInterval(id));
});

toSignal

guarantees:

toSignal()

must be called in an injection context (constructor or field initializer). It auto-subscribes and auto-unsubscribes using

DestroyRef

. The

initialValue

option avoids the

T | undefined

type widening;

requireSync: true

can be used when the observable is known to emit synchronously (e.g.,

BehaviorSubject

).

Mutation helpers: For arrays and objects, use

.update()

to apply a pure transform:

this.items.update((list) => list.filter((i) => i.id !== removedId));

Avoid mutating in place then calling

.set(this.items())

— signal equality checks use reference equality, so this won't trigger updates.

Zoneless change detection: Angular 18+ supports

provideExperimentalZonelessChangeDetection()

. With signals, components no longer need Zone.js to trigger change detection — signal writes schedule DOM updates directly. Adopting signals now future-proofs components for zoneless.

When to keep RxJS: Signals are not a replacement for RxJS when you need time-based operators (

debounceTime

,

throttleTime

), combination operators (

combineLatest

,

forkJoin

), or error handling (

catchError

,

retry

). Bridge with

toSignal()

/

toObservable()

at the boundary.

Source

https://angular.dev/guide/signals

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.