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.