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
Decision gist · record as of 2026-07-17
Angular Idioms teaches Angular 19+ patterns for signals, standalone components, and reactive design. 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.
Use it when
- angular-idioms emphasizes standalone component architecture as the modern Angular pattern.
- angular-idioms covers functional guards and resolvers as the modern routing pattern replacing class-based equivalents.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Similar skills
Install
irahardianto/awesome-agv/angular-idioms · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
.agents/skills/angular-idioms/SKILL.md
.agents/skills/angular-idioms/references/project-structure.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn Angular 19+ idioms, signals, and standalone component patterns”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Java Idioms covers modern language features and conventions for Java 17+ LTS, emphasizing records for immutable data, sealed classes for type-safe hierarchies, and pattern matching in switch expressions. The skill guides constructor injection, domain-specific exception handling, and testing with JUnit 5 and Mockito, alongside static analysis tooling to enforce code quality before commit.
Learn TypeScript's type system as your specification: enable strict mode, use type guards over casts, and validate all external data with Zod. This skill covers discriminated unions for state machines, immutability patterns, null safety, and the critical rule that all HTTP calls route through a centralized client for consistent auth and error handling.
Learn idiomatic Hono patterns for building type-safe HTTP APIs across any runtime. This skill covers router composition, middleware ordering, request validation with Zod, error handling, and end-to-end typed RPC clients—all without code generation.
Learn idiomatic Spring Boot 3.x patterns grounded in auto-configuration, constructor injection, and actuator-driven observability. Covers dependency injection best practices, Spring Data JPA query methods and projections, REST controller design with DTOs, and structured logging for production readiness. Includes testing patterns for integration and controller slices.
Learn Django conventions that emphasize model-centric design, clean separation of concerns, and test-driven development. This skill covers best practices for the ORM, views, migrations, and testing frameworks like pytest-django, helping you write maintainable, DRY code aligned with Django's philosophy.
Learn Laravel's idiomatic approach to building maintainable applications through Eloquent query scopes, service-oriented architecture, and Form Request validation. Covers testing with Pest, code formatting with Pint, and static analysis via PHPStan to enforce framework best practices.