angular-best-practices

Use ChangeDetectionStrategy.OnPush on components and replace mutable properties with Signals so updates trigger precise re-renders. For new projects on Angular v20+, enable zoneless change detection with provideZonelessChangeDetection() to remove zone.js overhead.

Replace nested subscriptions with forkJoin for independent parallel calls or switchMap to flatten dependent calls. For SSR apps, fetch critical data in route resolvers so it loads on the server before navigation instead of in ngOnInit.

Lazy load feature routes with loadChildren or loadComponent, wrap heavy components in @defer blocks, and dynamically import large third-party libraries like Chart.js. Avoid barrel file re-exports since they break tree-shaking.

Yes, @defer supports hydration triggers such as 'hydrate on viewport' and 'hydrate on interaction' when incremental hydration is configured via provideClientHydration(withIncrementalHydration()). This lets below-fold content hydrate lazily after the initial server render.

Lists re-render when @for lacks a proper track expression or uses $index instead of a stable item id. Add 'track item.id' so Angular reuses DOM nodes, and use CDK virtual scrolling for very large lists.

Use Signals for synchronous reactive state and derived values via computed(), and convert streams with toSignal() when the template only needs the latest value. Reserve manual subscriptions with takeUntilDestroyed for side-effect-driven logic.