Implement signal-based reactive state management in Angular v20+. Use for creating reactive state with signal(), derived state with computed(), dependent state with linkedSignal(), and side effects with effect(). Triggers on state management questions, converting from BehaviorSubject/Observable patterns to signals, or implementing reactive data flows.
Detected risks:
The angular-signals skill provides a state management solution based on Angular's reactive primitives, designed to simplify the creation of reactive state in Angular applications starting from version 20. It helps developers transition from BehaviorSubject/Observable patterns to a more granular and efficient signals-based approach. The skill focuses on core reactive features like writable signals, derived signals, dependent state, and side effects, offering a robust mechanism for managing state in modern Angular applications. With fine-grained reactivity, this solution ensures better performance and clarity in managing application states, making it easier for developers to handle reactive flows in their apps.
You can create writable state using the `signal()` API. Simply call `signal(initialValue)` to define a state and then use methods like `set()` to update it or `update()` to modify its value based on the current state.
No, angular-signals is designed to work with Angular v20 and later. It leverages the new reactive primitives introduced in Angular 20+ for managing state.
Yes, the `computed()` API allows you to create derived state that automatically updates when the dependent signals change. This makes it easy to maintain reactive relationships between state variables.
`signal()` creates a basic writable state, while `linkedSignal()` creates a dependent state that resets when the source signal changes. It’s useful for scenarios where you want state to be automatically updated or reset based on another signal's value.
You can use the `effect()` API to create side effects in response to changes in signals. This runs automatically whenever a signal’s value changes and supports cleanup through the `onCleanup` function, ensuring that resources like timers are properly disposed of.
Quick Setup:
.claude/skills/Repository
analogjs/angular-skills