Performance Optimization in Angular

From the Angular cheat sheet · Performance · verified Jul 2026

Performance Optimization

OnPush strategy, trackBy, and lazy loading

typescript

// OnPush Change Detection
@Component({
  selector: 'app-optimized',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: \`
    <div *ngFor="let item of items; trackBy: trackByFn">
      {{ item.name }}
    </div>
  \`
})
export class OptimizedComponent {
  @Input() items: Item[];

  trackByFn(index: number, item: Item): number {
    return item.id; // Return unique identifier
  }
}

// Lazy Loading Routes
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

💡 OnPush strategy skips change detection if inputs haven't changed

⚡ Always use trackBy with ngFor for large lists

📌 Lazy load modules to reduce initial bundle size

🔥 Use virtual scrolling for large lists (CDK required)

Back to the full Angular cheat sheet