# Angular

> Build reliable Angular apps avoiding RxJS leaks, change detection traps, and DI pitfalls.

- Skill: `dvcrn/angular` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add dvcrn/angular`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/angular/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/angular

---


## When to Use

User needs Angular expertise — component architecture, RxJS patterns, change detection, dependency injection, routing, and forms.

## Quick Reference

| Topic | File |
|-------|------|
| Components & change detection | `components.md` |
| RxJS & subscriptions | `rxjs.md` |
| Forms & validation | `forms.md` |
| Dependency injection | `di.md` |
| Routing & guards | `routing.md` |
| HTTP & interceptors | `http.md` |

## Common Mistakes

- `OnPush` with mutated objects won't trigger change detection — always create new reference: `{...obj}` or `[...arr]`
- `@ViewChild` is undefined in constructor/`ngOnInit` — access in `ngAfterViewInit` or later
- `*ngFor` without `trackBy` re-renders entire list on any change — add `trackBy` returning stable ID
- Manual `subscribe()` without unsubscribe leaks memory — use `async` pipe, `takeUntilDestroyed()`, or unsubscribe in `ngOnDestroy`
- `HttpClient` returns cold Observable — each `subscribe()` fires new HTTP request
- `setTimeout`/`setInterval` outside NgZone — change detection won't run, use `NgZone.run()` or signals
- Circular DI dependency crashes app — use `forwardRef()` or restructure services
- `ElementRef.nativeElement` direct DOM access breaks SSR — use `Renderer2` or `@defer`
- Route params via `snapshot` miss navigation changes — use `paramMap` Observable for same-component navigation
- `setValue()` on FormGroup requires ALL fields — use `patchValue()` for partial updates