Angular Patterns

Angular Patterns

Idiomatic modern Angular. Two sources, pick in this order:

1. Live (preferred): if the angular-cli MCP server is available (templates/mcp/angular-cli.example.json), call get_best_practices — it matches the workspace's installed Angular version — and search_documentation for API facts.
2. Offline fallback: best-practices.md, a vendored copy of Angular's official context file. It drifts as Angular releases; the provenance header says when it was fetched.

Core rules (from the official guide)

• Components: standalone by default (never set standalone: true — it is the default since v20); small, single-responsibility; input()/output() functions over decorators; host bindings in the host object, not @HostBinding/@HostListener; inline templates for small components.
• State: signals for local state, computed() for derived state, update()/set() (never mutate); keep transformations pure.
• Templates: native control flow (@if/@for/@switch) — never *ngIf/*ngFor/*ngSwitch; class/style bindings — never ngClass/ngStyle; async pipe for observables; no complex logic in templates.
• DI / services: inject() over constructor injection; singletons via providedIn: 'root' (or the @Service decorator on v22+); one responsibility per service.
• Forms: Signal Forms (@angular/forms/signals) on v22+; otherwise Reactive Forms — not template-driven.
• Routing: lazy-load feature routes.
• TypeScript: strict mode; no any (use unknown); prefer inference when the type is obvious.
• Accessibility: must pass AXE checks and WCAG AA (focus management, contrast, ARIA).
• Images: NgOptimizedImage for all static images (not inline base64).

Version-gated rules (OnPush default, @Service, Signal Forms) apply only when the workspace's Angular major supports them — check package.json before enforcing.

Validate

npx ng lint && npx ng test && npx ng build

Related

• Stack preset: stacks/angular-web.md (MCP setup, official skills, WebMCP).
• Instinct: knowledge/instincts/angular-ai-assets.md.
• Refresh the vendored copy: curl -sL https://angular.dev/assets/context/best-practices.md and update the provenance header date.