Під час створення користувацьких інтерфейсів для вебзастосунків часто виникають ситуації на кшталт: «Відобразити список елементів, якщо він доступний, або показати заповнювач, якщо він порожній». У Angular такі завдання вирішуються за допомогою структурних директив — потужних інструментів, які керують тим, що саме і коли буде відображено у шаблоні.

На відміну від звичайних HTML-атрибутів, структурні директиви не просто змінюють поведінку елемента — вони фактично змінюють структуру DOM, додаючи або видаляючи цілі елементи.

Структурна директива NgFor

Припустимо, у вас є список завдань у компоненті TaskListComponent. Кожне завдання має відображатися зі своїми елементами інтерфейсу: кнопкою видалення, перемикачем статусу тощо. Прописувати кожне завдання вручну в HTML було б неефективно та складно для підтримки при зміні даних.

tasks = [
  { id: 1, title: 'Buy groceries', completed: false },
  { id: 2, title: 'Walk the dog', completed: true },
  { id: 3, title: 'Learn Angular', completed: false }
];

Angular надає директиву *ngFor, яка дозволяє перебирати масив і автоматично створювати HTML-елемент для кожного елемента масиву.

<task-component *ngFor="let task of tasks"></task-component>

Тут *ngFor="let task of tasks" повідомляє Angular: "Для кожного завдання в масиві tasks створити один <task-component>". Якщо масив містить 3 завдання, Angular відобразить 3 окремі екземпляри task-component, кожен з власними даними. Це робить інтерфейс більш масштабованим і усуває дублювання коду.

Додаткові можливості ngFor

Окрім базової ітерації, *ngFor підтримує кілька корисних контекстних змінних, до яких можна отримати доступ безпосередньо в директиві за допомогою let.

Ось короткий довідник:

Ось приклад використання деяких із них:

<task-component
  *ngFor="let task of tasks; let i = index; let odd = odd"
  [task]="task"
  [class.odd]="odd">
</task-component>

У цьому прикладі змінна odd використовується для застосування CSS-класу до кожного другого рядка, що робить список візуально зручнішим для перегляду.

Структурна директива NgIf

Розглянемо, як працює умовний рендеринг на прикладі простого списку завдань. Необхідно відображати список, якщо в ньому є завдання, а якщо він порожній — показувати повідомлення на кшталт "Завдань ще немає".

В Angular для умовного відображення або приховування елементів використовується директива *ngIf. Хоча вона виглядає як звичайний HTML-атрибут, насправді виконує набагато більше дій у фоновому режимі.

<div *ngIf="tasks.length > 0">Task List</div>

Коли Angular обробляє *ngIf, він переписує шаблон у фоновому режимі. Замість безпосереднього рендерингу елемента, він обгортає його у <ng-template> і додає до DOM лише тоді, коли умова дорівнює true.

<ng-template [ngIf]="tasks.length > 0">
  <div>Task List</div>
</ng-template>

Якщо умова оцінюється як false (тобто, tasks.length === 0), Angular взагалі не відображає елемент — він повністю відсутній у DOM.

Але що робити, якщо потрібно показати резервне повідомлення замість простого приховування вмісту? У цьому допомагає конструкція else у *ngIf. Вона дозволяє посилатися на альтернативний шаблон за допомогою <ng-template> із власною міткою.

Відбувається наступне:

• Angular спочатку перевіряє, чи містить масив tasks елементи;

• Якщо так, відображається <div> із компонентами завдань;

• Якщо масив порожній, використовується шаблон #noTasks і виводиться повідомлення: "No tasks yet 😊".

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