Як @empty у Angular спрощує роботу з порожніми колекціями

У сучасній веб-розробці UX має вирішальне значення. Порожні стани — один з найчастіше ігнорованих, але критично важливих аспектів взаємодії з інтерфейсом. Angular додає цікавий підхід до цієї задачі: директиву @empty, яка дозволяє елегантно відображати повідомлення чи інтерфейс для порожніх колекцій. Давайте розберемось, як це працює і чому це корисно.

Проблема порожніх колекцій

Уявімо ситуацію: у нас є список повідомлень користувача. Якщо список не містить жодного повідомлення, то інтерфейс виглядає… дивно. Користувач не розуміє, чи все завантажилось, чи сталася помилка, чи ще щось. Саме для таких випадків і потрібен “empty state” — чіткий сигнал, що “даних немає”.

Традиційний підхід

Зазвичай розробники перевіряють довжину масиву вручну:

<div *ngIf="items.length; else emptyState">
  <div *ngFor="let item of items">{{ item.name }}</div>
</div>
<ng-template #emptyState>
  <p>Немає елементів для відображення</p>
</ng-template>

Цей код працює, але виглядає громіздко, повторюється і не дуже масштабований.

Що таке @empty у Angular?

У Angular версіях, де підтримується мова шаблонів з @-синтаксисом, можна використовувати директиву @empty у межах структурних директив типу *ngFor:

<ul *ngFor="let item of items; @empty">
  <li>{{ item.name }}</li>
  <ng-template #empty>
    <li>Немає елементів</li>
  </ng-template>
</ul>

Цей підхід не тільки робить код більш лаконічним, але й розділяє логіку відображення контенту та порожнього стану без зайвих перевірок у компоненті.

Як це працює під капотом?

@empty є синтаксичним розширенням, яке Angular трансформує під час компіляції шаблону. Воно визначає шаблон, який буде показано, якщо вхідна колекція порожня або null/undefined. Angular автоматично обробляє логіку перевірки всередині механізму NgForOf.

Переваги використання @empty

• Чистіший шаблон: менше умов, перевірок, ngIf/else.
• Краща читабельність: відразу видно, що буде показано у разі відсутності даних.
• Масштабованість: однакова логіка легко переноситься на будь-який список.
• Менше помилок: немає ризику забути про порожній стан.

Рекомендації до використання

1. Використовуйте @empty, якщо працюєте з Angular версіями, де підтримується новий синтаксис.
2. Якщо ваші дані приходять з Observable, переконайтесь, що *ngIf або async виконується коректно перед рендерингом списку.
3. Створіть власний компонент для “empty state”, який буде багаторазово використовуватись.

<app-empty [message]="'Немає результатів пошуку'"></app-empty>

Висновок

Директива @empty — це маленьке, але потужне доповнення до арсеналу Angular-розробника. Вона допомагає створювати зрозумілі, передбачувані та дружні до користувача інтерфейси, особливо там, де важлива прозорість у комунікації з користувачем. Не ігноруйте порожні колекції — вони говорять не менше, ніж заповнені.