Angular Idioms and Patterns

What problem does it solve?

It helps developers produce idiomatic, maintainable Angular code by enforcing modern Angular (17+) patterns and avoiding common anti-patterns that lead to bugs, performance issues, and harder-to-test components.

Core Features & Use Cases

• Standalone components by default: build new components without NgModules and leverage imports inside @Component.
• Signals-first state management: use signal, computed, and effect for predictable component state while reserving RxJS for asynchronous streams.
• Angular-native DI and typing: prefer inject() in standalone contexts, abstract services behind interfaces, and use typed reactive forms (FormControl<string>, FormGroup).
• Centralized error handling: implement global ErrorHandler and HTTP interceptors, and ensure RxJS pipelines handle errors instead of leaving subscriptions unguarded.
• Testing-friendly patterns: use Angular Testing Library for component tests, Spectator for services, and HttpTestingController for HTTP tests.

Quick Start

Apply the Angular Idioms and Patterns skill to your component and route code, then refactor state to signals, replace manual lifecycle wiring where appropriate, and ensure errors are handled via interceptors and guarded RxJS pipelines.