Orqestria Download
← Zurück zum Katalog

Skill · Version 1.0.0

Angular Signals und Zustand

Ordnet Zustandsverantwortung zu und verbindet synchrone Signals mit RxJS ohne unnötige Kopien oder versteckte Abhängigkeiten.

angular-signals-state

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill bei konkurrierenden Speichern, überflüssigen Effects oder ausbleibenden Ansichtsaktualisierungen.

Wobei hilft er dir?

  • Hält veränderbaren Zustand im engsten passenden Komponenten-, Routen- oder Dienstbereich.
  • Leitet Werte rein ab und stellt gemeinsamen Zustand schreibgeschützt bereit.
  • Prüft unterstützte APIs und Lebensdauer beim Wechsel zwischen Signals und Streams.

Das könntest du fragen

Vereinfache Produktfilter mit einer Zustandsquelle, berechneten Summen und abbrechbarer Suche innerhalb unserer unterstützten APIs. Ändere Kategorie und Preis gemeinsam und setze beide zurück. Die Trefferzahl soll aus abgeleitetem Zustand folgen, ohne auseinanderlaufende beschreibbare Kopie.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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.

Enthaltene Dateien 2

  • LICENSE.txt
  • SKILL.md

Über dieses Skill-Paket

angular-signals-state

angular-signals-state: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.

Details…Weniger anzeigen

angular-signals-state

angular-signals-state: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.

Enthält den vollständigen Skill und seine Begleitdateien (2 Dateien). Der genaue, ursprünglich verfasste Anwendungsbereich bleibt unten erhalten.

Ursprüngliche Skill-Beschreibung (Quellsprache)

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

Installiere den Skill, prüfe seine Quelle und Vertrauenseinstellungen und aktiviere ihn für das passende Projekt oder den Agenten.

Voraussetzungen

  • Orqestria auf deinem Computer installiert.