Angular signals and state

Signals & State Management

Match Signals and RxJS to the nature of the state: use Signals for synchronous reactive state and derived UI values, and RxJS for event streams, cancellation and complex async coordination.

1. Signals fundamentals (signal, computed, effect)

• Check the project's Angular version before using signal APIs (signal/computed/effect in v16–17+, input/output/model in v17.1+, linkedSignal/resource in v19+).
• signal(): own writable synchronous state in the narrowest component or service scope; expose .asReadonly() from services so consumers cannot mutate shared state bypassing service methods.
• computed(): derive values declaratively (filteredItems, isValid, total). computed getters must be pure and free of side effects.
• effect(): use sparingly for true side effects (logging, syncing to localStorage, imperative DOM/canvas APIs). Never use effect() to copy or synchronize state that can be expressed with computed() or linkedSignal().

2. RxJS and Signals interop (@angular/core/rxjs-interop)

• toSignal(obs$, { initialValue }): bridge an observable into a synchronous template-friendly signal; call it in an injection context (field initializer or constructor) and remember it subscribes immediately for the component/service lifetime.
• toObservable(sig): bridge a signal into an RxJS pipeline when you need debounceTime, switchMap cancellation or multi-step async operators; remember toObservable emits asynchronously via an internal effect, so intermediate synchronous writes within the same tick coalesce.

3. Shared service and store architecture

• Keep state in the narrowest suitable scope: component-local signals/fields first, route/feature-scoped service or SignalStore/ComponentStore next, and root-level store only for genuine cross-app state.
• Update object and array state immutably (sig.update(list => [...list, item])) so OnPush components and computed consumers detect changes reliably.

Before you finish

• Every piece of state has a single source of truth; read-only signals or streams exposed from shared services.
• Derived state uses computed() or pure RxJS operators, never effect() state copying.
• toSignal / toObservable used in a valid injection context with clear error and initial-value handling.