Управляющие блоки @if, @for, @switch

Управляющие блоки решают, какую часть шаблона показать и сколько раз её повторить. Они начинаются со знака @ и встроены в язык шаблонов, поэтому ничего импортировать не нужно.

@if

Блок выводится, только если условие истинно:

<!-- src/app/todo-list/todo-list.html -->
@if (todos().length === 0) {
  <p>Задач пока нет.</p>
}

Пока список пуст, на странице видна надпись «Задач пока нет.». Как только появится задача, абзац исчезнет из разметки полностью.

@else и @else if

<!-- src/app/todo-list/todo-list.html -->
@if (left() === 0) {
  <p>Всё сделано!</p>
} @else if (left() === 1) {
  <p>Осталась одна задача.</p>
} @else {
  <p>Осталось задач: {{ left() }}</p>
}

Выполняется первая ветка с истинным условием, как в обычном if из JavaScript.

@for

@for повторяет блок для каждого элемента массива. Выражение track обязательно: оно говорит, по какому полю Angular узнаёт элемент.

<!-- src/app/todo-list/todo-list.html -->
<ul>
  @for (todo of todos(); track todo.id) {
    <li [class.done]="todo.done">{{ todo.title }}</li>
  }
</ul>

Для каждой задачи появится пункт списка, выполненные получат класс done. Благодаря track при добавлении задачи Angular создаёт один новый li, а не перерисовывает весь список.

@empty и служебные переменные

Блок @empty показывается, когда массив пуст. Внутри @for доступны переменные $index, $count, $first, $last, $even, $odd:

<!-- src/app/todo-list/todo-list.html -->
<ul>
  @for (todo of todos(); track todo.id) {
    <li>{{ $index + 1 }}. {{ todo.title }}</li>
  } @empty {
    <li>Задач пока нет.</li>
  }
</ul>

Задачи выводятся с номерами: «1. Купить хлеб», «2. Позвонить Олегу».

@switch

Удобен, когда нужно выбрать один вариант из нескольких по значению. Добавим в класс фильтр:

// src/app/todo-list/todo-list.ts
filter = signal<'all' | 'active' | 'done'>('all');

<!-- src/app/todo-list/todo-list.html -->
@switch (filter()) {
  @case ('active') {
    <h3>Активные задачи</h3>
  }
  @case ('done') {
    <h3>Выполненные задачи</h3>
  }
  @default {
    <h3>Все задачи</h3>
  }
}

Заголовок меняется вместе со значением сигнала filter. Блок @default срабатывает, если ни один @case не подошёл.

Старый синтаксис

До Angular 17 вместо блоков использовали директивы *ngIf, *ngFor и [ngSwitch]. Они ещё работают, но в новых проектах пишите @if, @for и @switch — их не нужно импортировать, и они быстрее.

Частая ошибка

Писать track $index для списка, который меняется: при удалении задачи из середины номера сдвигаются, и Angular перерисовывает все элементы после неё — сбрасываются введённый текст и фокус. Отслеживайте элементы по уникальному полю, например track todo.id.

Спасибо, что читаете!

@if