Step 2: NgFor Fixed with TrackBy

The Solution

By using trackBy, Angular can track which items changed and only update those specific elements. Notice in the console that existing components are not recreated when adding new cards.

Note: we also removed the *ngFor directive and replaced it with @for.

<@for (card of cards; track card.id) {
  <app-card-item [card]="card" appLifecycleLogger></app-card-item>
}