Что такое новый control flow @if, @for и @switch в Angular?

Встроенный control flow (Angular 17+) — синтаксис блоков в шаблоне, который заменяет структурные директивы *ngIf, *ngFor и *ngSwitch.

Примеры

@if (user) {
  <p>{{ user.name }}</p>
} @else {
  <p>Гость</p>
}

@for (item of items; track item.id) {
  <li>{{ item.title }}</li>
} @empty {
  <li>Список пуст</li>
}

@switch (status) {
  @case ('loading') { <app-spinner /> }
  @case ('error') { <app-error /> }
  @default { <app-content /> }
}

Преимущества

• Не нужно импортировать CommonModule и NgIf.
• Блок @for требует track, поэтому разработчик не забывает про идентификатор, как с trackBy.
• Есть @empty и @else без отдельных шаблонов ng-template.
• Быстрее работает: логика встроена в компилятор.
• Дополнительно есть @defer для отложенной загрузки частей страницы.

Коротко для собеседования

Новый синтаксис проще и быстрее *ngIf и *ngFor. В @for обязателен track.