angular-patterns

Enforces signal-based reactivity rules for Angular components, stores, services, and subscriptions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Angular codebases drift into inconsistent reactivity patterns: subscriptions declared inside methods cause request races, getters recompute on every change detection cycle, and service calls inside computed values silently fail to update. This Skill codifies the signal-first rules so every component, store, service, directive, pipe, guard, and interceptor follows the same conventions. ## Core Features & Use Cases - Signal API conventions: Mandates signal(), computed(), input(), output(), viewChild(), OnPush change detection, and zoneless change detection instead of legacy decorators and getters. - Subscription lifecycle rules: Requires action sources with the Source suffix, subscriptions declared once at setup with switchMap/exhaustMap/concatMap, and termination via takeUntilDestroyed. - Store inheritance guidance: Directs list stores to inherit shared base classes (BaseStoreService, BaseAsyncStoreService) with a built-in message bus. - Use Case: When editing an Angular component that fetches data on a button click, the Skill instructs you to push the action into a refreshSource Subject, declare the subscription once in a field initializer with switchMap, and quench it with takeUntilDestroyed — avoiding response races. ## Quick Start Review this Angular component and rewrite its state, inputs, and subscriptions to follow the signal-based reactivity rules.

Frequently Asked Questions about angular-patterns

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

FAQPage Schema
How do I handle subscriptions in Angular signal-based components?

Declare the subscription once in a constructor, ngOnInit, or field initializer — never inside an action method. The method pushes a value into a Subject with the Source suffix, and the long-lived subscription uses switchMap, exhaustMap, or concatMap with takeUntilDestroyed.

What is the difference between computed and effect in Angular signals?

Use computed for derived values; an effect that writes a value into a signal is a manual recomputation that eventually lags behind its source. Computed values automatically track the signals they read and rebuild when those change.

Why does a service call inside computed not update the value?

A computed value only tracks signals it reads, and an ordinary service method is not a signal, so the value stays frozen at its first computation. Read the current state from a service-exposed signal instead so the derived value rebuilds on change.

Why should Angular components avoid getters?

A getter is recomputed on every change detection cycle, and its cost is invisible in the code. Replace getters with computed signals, which cache their result and only recompute when a dependency signal changes.

Does this rule set apply to NestJS backend code?

No. The rule explicitly excludes NestJS applications such as apps/api and libs/api, which use constructor-based dependency injection and have no signal API. It applies only to Angular frontend classes.

Why use afterNextRender instead of ngAfterViewInit in Angular?

With server-side rendering, the DOM does not exist when ngAfterViewInit runs on the server. afterNextRender schedules DOM initialization after the first client-side render, making it safe for browser-only DOM access.