Angular Study Portal

Common pitfalls

1) Default change detection everywhere

Problem: large trees get checked frequently on async events.

Fix:

• prefer ChangeDetectionStrategy.OnPush
• keep inputs immutable (new references)
• use signals for local state/derived values

2) Overusing Observables for local UI state

Problem: extra subscriptions + extra change detection + leak risk.

Fix:

• use signals for local UI toggles/derived values

3) *ngFor without trackBy

Problem: DOM churn and poor scrolling performance.

Fix: trackBy

4) Heavy logic in templates

Problem: template calls run frequently and hide cost.

Fix:

• precompute values (properties)
• use computed() for derived state

5) async pipe in tight loops (careful)

Problem: multiplying work and re-render churn when used incorrectly.

Fix:

• subscribe/convert once (e.g., toSignal)
• render from a stable array/value

6) Missing cleanup for manual subscriptions

Fix options:

``ts import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; this.stream$.pipe(takeUntilDestroyed()).subscribe(); ``

• prefer async pipe
• takeUntilDestroyed() (Angular interop)

7) Running high-frequency events inside Zone

Fix:

• ngZone.runOutsideAngular(...) for scroll/market-feed adapters
• re-enter the zone only when you need UI updates

8) No virtual scrolling for huge lists

Fix:

• cdk-virtual-scroll-viewport (render only what’s visible)