Как @empty в Angular упрощает работу с пустыми коллекциями / Хабр

Пустые состояния (Empty States) — это незаметные, но критически важные элементы интерфейса. Что видит пользователь, когда список задач пуст, поиск не дал результатов или дашборд ещё не содержит данных? Пу��той экран? Бесполезный спиннер? Или продуманное сообщение, которое помогает сориентироваться?

С появлением декларативного управления потоками (declarative control flow) в Angular обработка пустых состояний стала проще и элегантнее. Одна из ключевых возможностей — директива @empty, которая делает код чище, а интерфейс — дружелюбнее.

Давайте разберёмся, как это работает.

1. Почему пустым состояниям нужно больше внимания

Приложения часто работают с пустыми данными:

Нет задач в списке дел.
Поиск не дал результатов.
Нет уведомлений (хорошая новость, но пользователь должен это понять).

Плохо оформленное пустое состояние — это плохой UX.
Грамотная обработка таких сценариев помогает:
✅ Информировать пользователя (например, "Здесь пока ничего нет").
✅ Снижать тревожность (пустой экран может выглядеть как ошибка).
✅ Подсказывать действия ("Добавить первую задачу", "Изменить фильтры").

Как это делали раньше?

В ранних версиях Angular использовали *ngIf или дублировали разметку:

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
<div *ngIf="!items.length">Нет элементов.</div>

Это работало, но:
❌ Логика размазана по шаблону.
❌ Дублирование кода усложняет поддержку.
❌ Меньше выразительности — намерение разработчика неочевидно.

2. Директива @empty в Angular

С версии Angular 17+ появился новый декларативный синтаксис (@for, @if, @switch), включая @empty. Теперь обработка пустых состояний стала частью шаблонной логики.

Сравним старый и новый подход

🔹 Старый способ (до @empty)

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
<div *ngIf="items.length === 0">Нет элементов.</div>

🔹 Современный способ (с @empty)

<ul>
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }
  @empty {
    <li>Элементы не найдены.</li>
  }
</ul>

Почему это лучше?
✔ Код читаемее — логика списка и пустого состояния в одном месте.
✔ Меньше дублирования — не нужно отдельно проверять длину массива.
✔ Гибкость — внутри @empty можно использовать любую разметку.

3. Практические примеры

🔸 Пример: Поиск с @empty

<ul>
  @for (result of searchResults; track result.id) {
    <li>
      <strong>{{ result.title }}</strong>
      <span>{{ result.snippet }}</span>
    </li>
  }
  @empty {
    <li class="empty-state">
      <mat-icon>search_off</mat-icon>
      <p>Ничего не найдено. Попробуйте изменить запрос.</p>
    </li>
  }
</ul>

🔸 Переиспользуемый компонент для пустых состояний

Вместо текста можно использовать готовый компонент:

@empty {
  <app-empty-state
    icon="inbox"
    title="Нет данных"
    description="Попробуйте обновить страницу или изменить фильтры."
  />
}

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

Единый стиль во всём приложении.
Меньше кода — не дублируем разметку.

4. Важные нюансы @empty

Должен идти после @for — иначе будет ошибка компиляции.
Срабатывает только на пустой массив ([]) (но можно добавить проверку на null/undefined).
Поддерживает любую вложенную разметку — изображения, кнопки, стилизованные блоки.

5. Оптимизация UX через пустые состояния

Пустые экраны — не просто заглушки, а часть взаимодействия. Хороший empty state может:

Объяснять, почему данных нет.
Предлагать действия ("Создать задачу", "Обновить страницу").
Улучшать восприятие (например, через анимации или иллюстрации).

Рекомендации:

Не игнорируйте empty states — они влияют на UX.
Используйте компоненты для единообразия.
Тестируйте — отсутствие данных не должно выглядеть как ошибка.

Заключение

@empty в Angular — это не просто синтаксический сахар, а удобный и выразительный способ работы с пустыми состояниями.

Что это даёт?
Чище код — логика в одном месте.
Лучше UX — пользователь всегда видит осмысленный интерфейс.
Проще поддержка — меньше дублирования и ошибок.

Совет: Начните использовать @empty в новых проектах — это сделает ваши шаблоны лаконичнее, а интерфейсы — дружелюбнее.

Как @empty в Angular упрощает работу с пустыми коллекциями