skills.rest
MARUCIE
MARUCIECOMMUNITY
Explore all skills by this author →
GitHub

angular

Implements modern Angular patterns using standalone components, signals, and typed reactive forms.

1|Updated Mar 18, 2026
Search Tags:#typescript#frontend#angular#signals#reactive forms#standalone components#rxjs
One-click install
npx skills add https://github.com/MARUCIE/openclaw-foundry --skill angular-marucie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular
Source: https://github.com/MARUCIE/openclaw-foundry/tree/main/web/public/packs/spellbook-frontend-engineer/skills/angular
Command: npx skills add https://github.com/MARUCIE/openclaw-foundry --skill angular-marucie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Angular projects often accumulate inconsistent patterns: constructor DI mixed with inject(), BehaviorSubjects where signals belong, memory leaks from unmanaged subscriptions, and Default change detection hurting performance. This Skill provides a single authoritative reference for modern Angular (v17+) conventions so code stays consistent, testable, and performant. ## Core Features & Use Cases - Modern Component Patterns: Standalone components with OnPush change detection, new @if/@for/@switch control flow, and signal-based state with computed() and toSignal(). - State & Async Management: Guidance on choosing between signals, RxJS operators (switchMap, combineLatest, shareReplay), and NgRx when shared state or effects are needed. - Full-Stack Angular Coverage: Functional guards, resolvers, and HTTP interceptors, typed reactive forms with custom validators, lazy-loaded routes, and TestBed component and service tests. - Use Case: When refactoring a legacy Angular module to standalone components, use this Skill to convert constructor injection to inject(), replace *ngFor with @for and track expressions, and swap BehaviorSubjects for signals with readonly exposure. ## Quick Start Ask the AI to build or refactor an Angular component, service, or route following modern v17+ conventions with signals and OnPush change detection.

Frequently Asked Questions about angular

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

FAQPage Schema
How do I use signals instead of BehaviorSubject in Angular services?▼

Create a private writable signal and expose it publicly with asReadonly(), then derive values with computed(). Update state with set() or update(), and use toSignal() to convert Observables for template consumption instead of the async pipe.

Signals vs RxJS vs NgRx: which should I use for Angular state?▼

Use signals for local and service-level synchronous state, RxJS for async streams like HTTP and debounced search, and NgRx only when multiple features share state or you need time-travel debugging and complex side effects via Effects.

How do I prevent memory leaks from Angular subscriptions?▼

Use takeUntilDestroyed() from @angular/core/rxjs-interop, the async pipe in templates, or toSignal() to convert Observables. A bare subscribe() without one of these cleanup mechanisms leaks memory when the component is destroyed.

Does Angular standalone components still need NgModule?▼

No. Standalone components are the default in Angular 17+ and declare their own imports array. Bootstrap with app.config.ts using provideRouter and provideHttpClient instead of AppModule.

Why does ExpressionChangedAfterItHasBeenCheckedError happen in Angular?▼

It occurs when state mutates during change detection. Fix it by using OnPush change detection with signals, avoiding state mutation inside template-evaluated expressions, and never manually triggering updates mid-cycle.

How do I write functional HTTP interceptors in Angular?▼

Define an HttpInterceptorFn that receives the request and next handler, use inject() to access services like AuthService, clone the request with modified headers, and register it via provideHttpClient(withInterceptors([...])) in app.config.ts.

Related Skills

Explore More Software Engineering Skills→
dieu-donneedieu-donnee

angular-architect

Generate Angular 17+ standalone components, routes, and NgRx state scaffolding.

Community
Advanced
auldsyababuaauldsyababua
6

cicd-pipeline-generator

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.

Community
Advanced
launchapp-devlaunchapp-dev
38

documentation-template

Generate structured documentation templates for design-system components, patterns, and guidelines.

Official
Intermediate
pauljbernardpauljbernard
5

Frontend Framework Mastery

Provide expert frontend development guidance across React, Vue.js, Angular, and modern JavaScript frameworks.

Community
Advanced