angular-signals

Implement signal(), computed(), linkedSignal(), and effect() for Angular reactive state.

713|170|Updated Dec 22, 2020

Search Tags:#typescript #angular #signals #state-management #reactivity #effect #computed

Ready to run

npx skills add https://github.com/huajian123/ng-antd-admin --skill angular-signals-huajian123

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-signals
Source: https://github.com/huajian123/ng-antd-admin/tree/main/ui/.agents/skills/angular-signals
Command: npx skills add https://github.com/huajian123/ng-antd-admin --skill angular-signals-huajian123

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Angular's reactive state management can become boilerplate and hard to maintain when using Observables directly. Signals provide a simpler, synchronous, fine-grained approach to state management, enabling clearer data flow and easier reasoning about changes.

Core Features & Use Cases

Writable state with signal() for components and services.
Derived state with computed() to automatically recompute when dependencies change.
Dependent state with linkedSignal() to maintain related values.
Side effects with effect() to run code in response to state changes, including cleanup.
Interop with RxJS via toSignal/toObservable patterns for gradual migration.

Quick Start

Use angular-signals to convert a small form or counter to signal-based state. For example, create a count signal, derive a double, and log changes with an effect.

Frequently Asked Questions about angular-signals

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage reactive state in Angular without RxJS boilerplate?▼

Angular Signals provide a synchronous, fine-grained approach to reactive state management using signal(), computed(), and effect(), replacing complex Observable subscriptions with simpler, readable data flow for components and services.

What is the best way to migrate BehaviorSubject patterns to Angular Signals?▼

You can migrate BehaviorSubject patterns to Angular Signals gradually using RxJS interop. The toSignal and toObservable patterns allow you to adopt signals for state updates while maintaining interoperability with existing RxJS-based code.

How do I create derived state in Angular that updates automatically?▼

Use the computed() function to create derived state in Angular. It automatically recalculates its value when any dependency signal changes, ensuring deterministic updates for interactive components without manual change detection.

When do I need to use effect() in Angular state management?▼

Use effect() in Angular state management when you need to execute side effects in response to signal changes. It runs code after dependency updates, supports cleanup functions, and is ideal for logging or synchronizing external systems.

How does linkedSignal() maintain related values in Angular components?▼

linkedSignal() maintains dependent state in Angular components by linking related values together. When a source signal changes, linkedSignal updates the dependent state automatically, ensuring synchronized data flow without manual tracking.

Does Angular Signals work with existing RxJS Observable workflows?▼

Yes, Angular Signals works with existing RxJS Observable workflows through built-in interop patterns. The toSignal and toObservable conversion functions enable gradual migration, allowing you to mix synchronous signals with async Observable streams.