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

Task involves	Read
Components, templates, host bindings, content projection	references/component.md
signal(), computed(), linkedSignal(), effect(), reactive state	references/signals.md
inject(), providers, injection tokens, services	references/di.md
Custom directives, DOM manipulation, host listeners	references/directives.md
Forms, validation, signal forms API	references/forms.md
HTTP calls, resource(), httpResource(), interceptors	references/http.md
Routes, lazy loading, guards, resolvers, navigation	references/routing.md
SSR, hydration, prerendering, browser-only APIs	references/ssr.md
Unit tests, integration tests, TestBed, Vitest	references/testing.md
Angular CLI, schematics, build config, project setup	references/tooling.md

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

Gotchas (top 5 — most common Codex 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.