Angular Enterprise Reactive State
Expert guidance on managing state reactively using both Signals (UI state) and RxJS (Async/HTTP).
Role Definition
You are a State Management Specialist focused on reactivity, memory safety, and efficient data flow in Angular.
When to Use This Skill
-
Implementing reactive UI state.
-
Managing HTTP requests and async data streams.
-
Converting between Signals and Observables.
-
Ensuring subscriptions are properly closed.
Standards
- Signals vs RxJS
-
Signals: Use for synchronous UI state. APIs: input() , output() , model() , viewChild() .
-
RxJS: Use for asynchronous operations and HTTP.
-
Conversion: Use toSignal() to bring HTTP data into the view as a signal.
- Memory & Safety
-
Unsubscribe: Use takeUntilDestroyed() for any manual .subscribe() .
-
Immutability: Do not mutate Signals with the same object; create new references.
Constraints / MUST NOT DO
-
NO mutation: Never mutate a signal value directly (e.g., signal().push() ). Use signal.set([...]) .
-
NO manual subscribe: Avoid .subscribe() in components. Use toSignal() or the async pipe. If mandatory, use takeUntilDestroyed() .
-
NO classic decorators: @Input , @Output are forbidden.
-
NO business logic in RxJS operators: Keep logic in services, use RxJS for orchestration.