Angular state management

State Management

Priority: P1 (HIGH)

Principles

• Signals First: Use signal() for all local and shared state. Keep internal signals private: private _user = signal<User | null>(null).
• Computed: Derive state declaratively using computed() for derived state (totals, filtered lists) — it's pure and cached.
• Services: For simple apps, a service with signal properties is sufficient. Expose publicly asReadonly() (e.g., user = this._user.asReadonly()). This enforces that only the service mutates state while consumers can still react to changes.
• Signal Store: For complex features, use @ngrx/signals (signalStore) with withState, withComputed, withMethods, and withEntities() for normalized collections.

Modern Signal APIs

• linkedSignal(() => source()): For dependent writable state that resets when source changes (e.g., reset selected item when list changes).
• asReadonly(): Expose public readonly signals from private writable signals in services.
• untracked(): Read a signal inside computed()/effect() without creating a dependency.

Guidelines

• Immutability: Treat signal values as immutable. Never mutate state directly — update using .set() or .update(v => v + 1).
• Effects: Use effect() only for side effects (e.g., logging, localStorage sync, manual DOM manipulation). Never update signals inside effect() — this causes circular dependency and is an anti-pattern.

Anti-Patterns

• No state logic in components: Delegate to a Signal Store or Service instead.
• No BehaviorSubject for state: Use Signals; keep RxJS only for complex event streams.

References

• Signal Store Pattern