Angular Performance

Performance

Priority: P1 (HIGH)

Principles

• OnPush: Always use ChangeDetectionStrategy.OnPush on all components. Components should only update when Signals for state change or Inputs change.
• Deferrable Views: Use @defer (on viewport) to lazy load heavy components/chunks below fold. Use triggers: on interaction, on idle, when condition. @defer creates separate lazy-loaded chunk automatically. Use @placeholder { <Spinner /> } for loading states.
• Images: Import NgOptimizedImage and replace <img src='...'> with <img ngSrc='...' width='800' height='600'>. Add priority attribute for LCP images. This enables lazy loading, responsive srcset, and preconnect hints automatically.

Guidelines

• Zoneless: Prepare for Zoneless Angular by avoiding Zone.runOutsideAngular hacks. Use Signals for all reactive state instead. Opt into provideExperimentalZonelessChangeDetection().
• TrackBy: Always provide stable unique identifier in loops using @for (item of items; track item.id) — track expression replaces trackBy. This prevents Angular from destroying and recreating DOM nodes.

Anti-Patterns

• No function calls in template: {{ calculate() }} re-evaluates on every change detection cycle. Use computed() signal or pure pipes to avoid per-cycle re-evaluation as it caches until dependencies change.
• No logic in constructor: Initialize state in ngOnInit or signal effects instead.

References

• Defer Usage

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

• caches until dependencies change
• computed() signal
• priority attribute
• re-evaluates on every change detection
• replaces trackBy
• srcset

• Additional task-grounded exact anchors: Signals for state; @for (item of items; track item.id); stable unique identifier