Orqestria Download
← Back to the catalog

Skill · Version 1.0.0

Angular signals and state

Assigns state ownership and combines synchronous Signals with asynchronous RxJS without redundant copies or hidden dependencies.

angular-signals-state

See how it helps

When is it useful?

Use when Angular screens contain competing state stores, unnecessary effects or changes that fail to update the view.

What does it help you do?

  • Keeps writable state in the narrowest suitable component, route or service scope.
  • Derives values with pure computations and exposes shared state read-only.
  • Checks supported APIs and lifecycle behavior when bridging signals and observable streams.

Try asking this

Simplify our product filters with one state owner, computed totals and cancellable search, using APIs supported by this project. Change category and price together, then clear both. The displayed count should follow derived state without a second writable copy drifting out of sync.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

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.

Included files 2

  • LICENSE.txt
  • SKILL.md

About this skill package

angular-signals-state

angular-signals-state: Build maintainable Angular features with clear component boundaries, reactive state, forms and tested migrations.

Details…Show less

angular-signals-state

angular-signals-state: Build maintainable Angular features with clear component boundaries, reactive state, forms and tested migrations.

Includes the complete skill and its supporting files (2 files). The exact authored scope is preserved below.

Original skill description (source language)

Use when managing local or shared state in Angular using Signals (signal, computed, effect, linkedSignal, resource, toSignal, toObservable), RxJS BehaviorSubjects, or NgRx / SignalStore.

Install the skill, review its source and trust settings, then enable it for the relevant project or agent.

Requirements

  • Orqestria installed on your computer.