Signals, computed state, linkedSignal, and resources

Signals are Angular's granular synchronous reactive state model.

Writable and computed

items = signal<Order[]>([]);
query = signal('');
visible = computed(() =>
  this.items().filter(item => item.name.includes(this.query()))
);

Store source state in writable signals. Derive state with computed; do not copy derived values into another writable signal.

Effects

Effects synchronize state with non-reactive side effects such as logging, storage, or imperative APIs. They are not the default way to propagate state. Avoid writing signals inside effects when a computed relationship exists.

linkedSignal

linkedSignal models writable state that depends on another source—for example, a selected option that resets only when it becomes invalid after options change.

resource and httpResource

Resources combine reactive parameters with asynchronous loading, cancellation, status, value, and error signals. resource and httpResource are stable since Angular 22. httpResource uses HttpClient and interceptors. Guard value() with hasValue() because an error-state read can throw.

Use HttpClient methods directly for mutations. A resource is naturally suited to reads whose parameters are reactive.

Equality and mutation

Signals notify on updates according to equality. Mutating an array in place can hide change. Create the next value:

this.items.update(items => [...items, created]);

RxJS interop

toSignal subscribes to an Observable within lifecycle ownership. toObservable exposes signal changes as an Observable. Convert once at a boundary and keep the internal model consistent.

Feynman check

A signal is a labeled value with subscribers. A computed signal is a formula. An effect is a messenger leaving Angular's reactive graph. A resource is a managed async request with state.