ngocsangyem 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,@forwithtrack,@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)
- Using @Input/@Output decorators: deprecated in v20+ → use
input(),output()signal functions - **Using ngIf/ngFor: deprecated template syntax → use
@if,@forwithtrackexpression - Constructor injection: outdated pattern → use
inject()in field initializers - BehaviorSubject for component state: over-complex → use
signal()+computed() - 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.