mk:angular

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 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.