angular-signals_skill

Overview

This skill implements signal-based reactive state management for Angular v20+. It teaches creating writable signals with signal(), derived values with computed(), dependent resets with linkedSignal(), and side effects with effect(). The skill focuses on converting BehaviorSubject/Observable patterns to signals and building predictable, synchronous state flows.

How this skill works

The skill inspects component and service state patterns and shows how to replace RxJS-centric state with Angular signals. It demonstrates creating signals, composing computed and linkedSignal dependents, and using effect for side effects and cleanup. It also covers RxJS interop with toSignal and toObservable plus equality, untracked reads, and readonly state for services.

When to use it

• Migrating components that rely on BehaviorSubject/Observables to signal-based state.
• Building local component state with synchronous, fine-grained reactivity.
• Creating derived, memoized values that update automatically when dependencies change.
• Implementing dependent selections that reset when their source changes (linkedSignal).
• Converting observable data flows where you still need RxJS operators (use toObservable/toSignal).

Best practices

• Keep writable signals private in services and expose readonly signals via asReadonly().
• Use computed() for derived state and avoid duplicating logic across components.
• Use linkedSignal() when a child selection should reset on source updates, and preserve previous selection when appropriate.
• Keep effects focused: avoid writing signals inside effects unless using allowSignalWrites intentionally.
• Use toSignal() with initialValue or requireSync for BehaviorSubjects to avoid undefined values.

Example use cases

• Replace a BehaviorSubject-based counter with a writable signal and computed selectors.
• Implement a todo list with signal-backed todos, computed filteredTodos, and remaining count.
• Create a selection UI that auto-resets when the options source changes using linkedSignal().
• Convert a search input debounce pipeline: toObservable(query) -> debounceTime -> switchMap -> toSignal(results).
• Manage auth state in a service with private signals and public readonly computed isAuthenticated.