Agent-Skills.md

Agent Skills: State Management

Manage 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. (triggers: **/*.store.ts, **/state/**, angular signals, signal store, computed, effect, linkedSignal)

UncategorizedID: hoangnguyen0403/agent-skills-standard/angular-state-management

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/angular/angular-state-management

Skill Files

Browse the full folder contents for angular-state-management.

Download Skill

Loading file tree…

skills/angular/angular-state-management/SKILL.md

Skill Metadata

Name
angular-state-management
Description
"Manage 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. (triggers: **/*.store.ts, **/state/**, angular signals, signal store, computed, effect, linkedSignal)"

State Management

Priority: P1 (HIGH)

1. Use Signals for All State

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

See signal store pattern for signal-based service and store examples.

2. Derive State with computed()

  • Use computed() for totals, filtered lists, and other derived values — it is pure and cached.
  • Use linkedSignal(() => source()) for dependent writable state that resets when source changes.
  • Use untracked() to read a signal inside computed()/effect() without creating a 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 a Signal Store or Service.
  • No BehaviorSubject for state: Use Signals; keep RxJS only for complex event streams.

References