Huge Lists: trackBy + Virtual Scrolling

When you display large lists, performance can drop fast. Two tools help the most: 1) trackBy 2) virtual scrolling (render only what is visible) ## Step 1: Always use trackBy ```html <li *ngFor="let item of items; trackBy: byId"> {{ item.title }} </li> ``` ```ts byId(_: number, item: { id: number }) { return item.id; } ``` ## Step 2: Use CDK Virtual Scroll for very big lists Install Angular CDK if needed, then: ```ts import { Component } from '@angular/core'; import { ScrollingModule } from '@angular/cdk/scrolling'; @Component({ selector: 'app-big-list', standalone: true, imports: [ScrollingModule], template: ` <cdk-virtual-scroll-viewport itemSize="50" style="height: 400px;"> <div *cdkVirtualFor="let item of items; trackBy: byId"> {{ item.title }} </div> </cdk-virtual-scroll-viewport> `, }) export class BigListComponent { items = Array.from({ length: 10000 }).map((_, i) => ({ id: i, title: 'Row ' + i })); byId(_: number, item: { id: number }) { return item.id; } } ``` ## Why it works Virtual scroll renders maybe 20–50 items at a time, not 10,000. > Next: Security topics, XSS, sanitization, and safe rendering.