AI agent skill · by @HoangNguyen0403

Angular State Management

Implement application state with Angular Signals, computed derivations, and NgRx Signal Store. Use when implementing reactive state with signal(), computed(), effect(), or @ngrx/signals in Angular.

Archived 2026-10-23 · Source updated 2026-09-15 · License: MIT. Check the original repository for the latest version.

SKILL.md instructions

# State Management

## **Priority: P1 (HIGH)**

## 1. Use Signals for All State

- Keep internal signals private; expose publicly via `asReadonly()`.

See [signal store pattern](references/signal-store.md) for signal-based service and store examples.

## 2. Derive State with computed()

- Use `computed()` for totals, filtered lists, derived values — pure and cached.
- Use `linkedSignal(() => source())` for dependent writable state that resets when source changes.
- Use `untracked()` to read signal inside `computed()`/`effect()` without creating dependency.

## 3. Scale with Signal Store

- For complex features, use `@ngrx/signals` (`signalStore`) with `withState`, `withComputed`, `withMethods`, and `withEntities()`.

## 4. Handle Side Effects

- Use `effect()` only for side effects (logging, localStorage sync, DOM manipulation).
- **Never update signals inside effect()** — causes circular dependencies.
- Treat signal values as immutable — update with `.set()` or `.update(v => ...)`.

## Anti-Patterns

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

## References

- [Signal Store Pattern](references/signal-store.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- Never update signals inside effect()
- resets when source changes