How does the new at for control flow block work, and why does it require a track expression?

The at for block repeats a piece of template content for every item in a list, similar to the older ngFor directive, but it requires a track expression, telling Angular exactly how to identify each item uniquely, which helps Angular efficiently update the list when items are added, removed, or reordered.

@Component({
  selector: 'app-todo-list',
  template: `
    @for (todo of todos; track todo.id) {
      <li>{{ todo.text }}</li>
    } @empty {
      <li>No tasks yet</li>
    }
  `
})
export class TodoListComponent {
  todos: { id: number; text: string }[] = [];
}