Структурные директивы:

  1. ngIf: используется для условного отображения или удаления элемента на основе заданного выражения.

Пример:

<div *ngIf="isLoggedIn">Welcome, {{ username }}!</div>

Приведенный выше тег div отображается тогда и только тогда, когда значение переменной isLoggedIn оказывается равным True.

2.ngFor:
отображает шаблон для каждого элемента в коллекции. В Angular структурная директива ngFor используется для отображения шаблона для каждого элемента в коллекции путем итерации по коллекциям (массивам или объектам). Это очень похоже на цикл for в языке программирования.

Пример :

<ul>
     <li *ngFor="let item of items">{{ item }}</li>
  </ul>
  • В приведенном выше примере элементы представляют собой массив или объект, который содержит список значений, которые должны быть отображены, например, группа студентов. Переменный элемент используется для итерации цикла, он также называется переменной цикла.
  • Эта директива используется, когда у нас есть динамические данные вместо ввода нескольких операторов.

3.ngSwitch:
В Angular ngSwitch используется для переключения между несколькими шаблонами на основе значения выражения условия.

Вот как это работает:

<div [ngSwitch]="condition">
     <p *ngSwitchCase="'A'">Option A</p>
     <p *ngSwitchCase="'B'">Option B</p>
     <p *ngSwitchDefault>Default Option</p>
  </div>
  • Связывает значение условия компонента с директивой ngSwitch, используя синтаксис [ngSwitch]="condition". Какой шаблон в блоке ngSwitch должен отображаться, зависит от значения условия.
  • ngSwitchCase="'A'":

Когда значение условия совпадает с предоставленным значением варианта (в данном случае «A»), директива *ngSwitchCase определяет отображаемый шаблон. Элемент p›, содержащий текст «Вариант A», будет отображаться, если условие равно «A».

  • ngSwitchCase="'B'":

Эта директива *ngSwitchCase определяет шаблон, который будет отображаться, когда значение условия совпадает со значением варианта ('B'), аналогично предыдущему случаю. Элемент p›, содержащий текст «Вариант B», будет отображаться, если условие равно «B».

  • Если ни одно из значений ngSwitchCase не соответствует значению условия, директива *ngSwitchDefault используется для указания шаблона по умолчанию, который будет отображаться. Элемент с текстом «Опция по умолчанию» будет показан, если условие не соответствует ни одной ситуации.
  • «Вариант A», «Вариант B» или «Параметр по умолчанию» отображается в этом примере в зависимости от значения условия.

Это дает гибкость в представлении контента на основе критериев и позволяет динамически отображать различные шаблоны на основе значения переменной или выражения.
Существует больше угловых директив, таких как
1. Директивы атрибутов
2. Пользовательские директивы
Мы рассмотрим эти темы в следующем посте.
Удачного кодирования…😉