angular-idioms
Learn idiomatic Angular through signals, standalone components, and reactive patterns. This skill covers modern Angular 19+ practices including OnPush change detection, signal-based state management, functional guards and resolvers, and template control flow syntax. Covers components, services, directives, pipes, and routing for TypeScript-based Angular projects.
Angular Idioms teaches Angular 19+ patterns for signals, standalone components, and reactive design.
AI-generated summary based on this skill's SKILL.md
Install
irahardianto/awesome-agv/angular-idioms · repository language: JavaScript
git clone https://github.com/irahardianto/awesome-agv
cp -r awesome-agv/.agents/skills/angular-idioms ~/.claude/skills/angular-idiomsnpx skillfed install irahardianto/awesome-agv/angular-idiomsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do signals work in Angular and what are their benefits?
angular-idioms teaches that signals are Angular 19+ primitives for fine-grained reactivity. Signals enable automatic change detection without zone.js overhead, pair naturally with OnPush strategy, and simplify state management. The skill covers creating signals with signal(), computed() for derived state, and effect() for side effects—replacing many RxJS patterns while maintaining type safety and predictable updates.
What are standalone components and how do I build with them?
angular-idioms emphasizes standalone component architecture as the modern Angular pattern. Standalone components eliminate NgModule boilerplate by declaring dependencies directly via imports, providers, and schemas. The skill covers migrating from module-based layouts, composing standalone components, lazy-loading standalone routes, and using the inject() function for dependency injection—core to Angular 19+ idiomatic design.
How should I implement functional guards and resolvers in routing?
angular-idioms covers functional guards and resolvers as the modern routing pattern replacing class-based equivalents. Functional guards are plain functions returning boolean or UrlTree, while resolvers return data or signals. The skill teaches dependency injection via inject(), composing guards with logical operators, and integrating resolvers with signal-based state for type-safe, testable route protection and data loading.
What are angular components signals standalone architecture best practices?
angular-idioms teaches that modern Angular architecture combines signals for state, standalone components for modularity, and OnPush change detection for performance. Best practices include using computed() for derived state, effect() for subscriptions, signal inputs via @Input, and avoiding legacy NgModule patterns. The skill emphasizes functional composition, lazy-loaded routes, and typed reactive forms for maintainable, efficient applications.
How do I manage state with NgRx Signal Store in Angular?
angular-idioms covers NgRx Signal Store as a lightweight, signal-native state management solution. Signal Store replaces traditional NgRx by composing features with signals, computed selectors, and effects for side effects. The skill teaches structuring stores, typing state immutably, integrating with components via inject(), and combining with Angular's template control flow (@if, @for) for reactive, type-safe state-driven UIs.
What Angular anti-patterns should I avoid in modern projects?
angular-idioms identifies anti-patterns to eliminate: NgModule boilerplate in new code, class-based guards/resolvers, untyped reactive forms, manual subscription management without takeUntilDestroyed(), OnPush=false with change detection thrashing, and legacy template syntax. The skill promotes signals over BehaviorSubject, standalone components, functional patterns, typed FormControl, and proper RxJS cleanup—ensuring idiomatic, maintainable Angular 19+ code.
SKILL.md
rendered from the published skill — quoted content, verbatim
Angular Idioms and Patterns
Core Philosophy
Angular (19+) rewards signals, standalone components, and reactive patterns. Idiomatic Angular = typed, modular, RxJS-aware, OnPush by default.
> Scope: This file covers Angular-specific coding idioms for components, services, and patterns. For TypeScript type system patterns, see @.agents/skills/typescript-idioms/SKILL.md. For file and folder layout, see references/project-structure.md.
Standalone Components (Default)
- Standalone components — no NgModules for new components (standalone is the default since Angular 19):
``typescript @Component({ selector: 'app-task-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TaskCardComponent], template:@for (task of filteredTasks(); track task.id) { <app-task-card [task]="task" /> } ` })
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
.agents/skills/angular-idioms/SKILL.md
.agents/skills/angular-idioms/references/project-structure.md