Angular Performance Optimization

# CHAPTER 24

Angular Performance Optimization #

1. Chapter Introduction #

2. Learning Objectives #

• Implement OnPush change detection strategy.

• Use trackBy with *ngFor to avoid unnecessary DOM re-renders.

• Implement lazy loading for modules and images.

• Use the async pipe to prevent manual subscriptions.

• Understand virtual scrolling for large lists.

3. Change Detection: Default vs OnPush #

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  // OnPush: Only update when @Input reference changes
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductCardComponent {
  @Input() product: any;
}

Performance gain: In a list of 1,000 product cards, OnPush prevents 999 unnecessary checks when the user clicks a single button.

4. trackBy with *ngFor #

export class ProductListComponent {
  products: any[] = [...]; // 1000 items

  trackByProductId(index: number, product: any): number {
    return product.id; // Angular uses the ID to identify items
  }
}

<!-- Without trackBy: ALL 1000 items re-render on any change -->
<li *ngFor="let product of products">

<!-- WITH trackBy: Only changed items re-render -->
<li *ngFor="let product of products; trackBy: trackByProductId">
  {{ product.name }}
</li>

5. Lazy Loading Modules #

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

Result: Initial bundle might go from 5MB to 500KB, dramatically improving Time-to-Interactive.

6. Pure Pipes Over Methods in Templates #

<!-- BAD: Function called on every change detection cycle! -->
<li *ngFor="let product of getFilteredProducts()">

<!-- GOOD: Pure pipe only recalculates when input reference changes -->
<li *ngFor="let product of products | filterByCategory:selectedCategory">

7. Async Pipe Instead of Manual Subscriptions #

// BAD: Manual subscription — must remember to unsubscribe
export class Bad {
  users: User[] = [];
  ngOnInit() { this.userService.getUsers().subscribe(u => this.users = u); }
}

// GOOD: async pipe — auto-manages subscription, enables OnPush compatibility
export class Good {
  users$ = this.userService.getUsers(); // Observable
}

<li *ngFor="let user of users$ | async">{{ user.name }}</li>

8. Virtual Scrolling for Large Lists #

npm install @angular/cdk

import { ScrollingModule } from '@angular/cdk/scrolling';

<cdk-virtual-scroll-viewport itemSize="50" style="height: 400px;">
  <div *cdkVirtualFor="let item of largeDataset">{{ item.name }}</div>
</cdk-virtual-scroll-viewport>

Rendering 10,000 items? Virtual scrolling renders only ~20 visible items at a time!

9. Bundle Optimization #

# Build for production — enables tree-shaking, minification, AOT compilation
ng build --configuration=production

# Analyze bundle size
npm install -g source-map-explorer
source-map-explorer dist/my-app/main.js

10. Preloading Strategy #

import { PreloadAllModules } from '@angular/router';

provideRouter(routes, withPreloading(PreloadAllModules))
// Lazy loads modules in the background after initial load

11. Common Mistakes #

• Method calls in templates: Methods in {{ getXyz() }} are called on every change detection cycle. Use pipes or async instead.

• Not using OnPush on presentational components: "Dumb" components that only receive @Input should always use OnPush.

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain OnPush change detection. What kind of components should use it and why?

• Q: What is virtual scrolling and why is it necessary for lists with thousands of items?

14. Summary #

15. Next Chapter Recommendation #