Angular

--- name: Angular slug: angular version: 1.0.1 description: Build reliable Angular apps avoiding RxJS leaks, change detection traps, and DI pitfalls. ---

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