Angular

Angular v20+ patterns — 10 topics consolidated with progressive disclosure.

v20+ Modern Defaults (apply always)

• Standalone components are default — no NgModule needed
• Signal-based inputs/outputs — use input(), input.required(), output() (not @Input/@Output)
• Signal-based state — use signal(), computed(), linkedSignal() (not BehaviorSubject)
• inject() function — use inject() in field initializers (not constructor injection)
• Native control flow — use @if, @for with track, @switch (not *ngIf/*ngFor)
• OnPush change detection — always set changeDetection: ChangeDetectionStrategy.OnPush
• Functional guards/resolvers — use functions (not class-based guards)
• resource() / httpResource() — prefer over manual HttpClient subscribe for data loading

When to Read Each Reference

Read multiple references when task spans topics (e.g., component + signals + forms).

Gotchas (top 5 — most common Claude mistakes)

1. Using @Input/@Output decorators: deprecated in v20+ → use input(), output() signal functions
2. *Using ngIf/ngFor*: deprecated template syntax → use @if, @for with track expression
3. Constructor injection: outdated pattern → use inject() in field initializers
4. BehaviorSubject for component state: over-complex → use signal() + computed()
5. Class-based guards/interceptors: deprecated → use functional CanActivateFn, HttpInterceptorFn

Full list: references/gotchas.md

Workflow Integration

Auto-activates during Phase 3 (Build) when Angular project detected (angular.json or @angular/core in package.json). Loaded by developer agent alongside mk:typescript.