angular-patterns-state

Implements signal-based state and stream patterns for Angular components and services.

1|Updated Jan 14, 2024
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill angular-patterns-state-eyhenij
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-patterns-state
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/angular-patterns-state
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill angular-patterns-state-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Angular developers often mix legacy decorator APIs with signals, leak subscriptions, or recompute values with getters, leading to memory leaks and race conditions. This Skill provides ready-made patterns for declaring state and streams correctly in Angular classes. ## Core Features & Use Cases - Signal-based APIs: Enforces input(), output(), and viewChild() signal functions instead of @Input()/@Output() decorators. - Derived state with computed: Replaces effects and getters with computed() for values derived from other signals. - Service state encapsulation: Shows the private writable signal plus public readonly exposure pattern in injectable services. - Subscription discipline: Declares a single subscription in the constructor with takeUntilDestroyed, a Subject action source, and the correct flattening operator (switchMap, exhaustMap, mergeMap). - Use Case: When building an Angular component that loads a list on demand, apply this pattern to declare a #loadSource Subject, subscribe once in the constructor with switchMap and takeUntilDestroyed, and expose results as readonly signals. ## Quick Start Apply the angular state pattern to declare signals, computed values, and a single constructor subscription in my component.

Frequently Asked Questions about angular-patterns-state

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

FAQPage Schema
How do I declare state in an Angular component with signals?

Declare state with `signal()` for writable values and `computed()` for derived values, and use `input()` and `output()` for the component API. Avoid decorators like `@Input()` and getters, which recompute on every change detection cycle.

How to manage RxJS subscriptions in Angular without memory leaks?

Declare the subscription once in the constructor and terminate it with `takeUntilDestroyed(this.#destroyRef)`. Action methods push values into a Subject source instead of calling `.subscribe()` inside methods, which prevents races on fast repeated triggers.

Should I use computed or effect for derived values in Angular signals?

Use `computed()` for any value derived from other signals, such as a count from a list. Using `effect()` to set another signal duplicates state and is rejected by this pattern.

Which RxJS operator should I use for HTTP requests in Angular?

Choose by how to treat the previous request: `switchMap` takes the last response for lists, `exhaustMap` prevents duplicate submissions from buttons, and `mergeMap` runs independent neighbouring requests in parallel.

When should I not use this Angular state pattern?

Do not use it for the layout and structure of a component file, which belongs to the component-structure rule. It covers only state declaration, derived values, and stream subscriptions.