Angular — Performance

Lazy Loading

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

OnPush Change Detection

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
export class UserComponent {
  @Input() user: any;
}

TrackBy

<div *ngFor="let item of items; trackBy: trackById">
  {{item.name}}
</div>

trackById(index: number, item: any): number {
  return item.id;
}

OnPush with Signals

@Component({
  selector: 'app-counter',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>{{count()}}</p>
    <button (click)="increment()">+</button>
  `
})
export class CounterComponent {
  count = signal(0);
  
  increment() {
    this.count.update(c => c + 1);
  }
}

Performance Checklist

Technique	Impact
Lazy loading	Faster initial load
OnPush detection	Less change detection
trackBy	Faster list rendering
Async pipe	Auto unsubscribing
Signals	Fine-grained updates

Mini Practice

1. Add lazy loading
2. Use OnPush change detection
3. Add trackBy to lists
4. Optimize with signals

Up Next

Continue with Deployment — deploying Angular apps.