Angular – популярная платформа для создания динамических веб-приложений. Одной из его мощных функций является возможность использовать условные директивы, которые позволяют вам управлять рендерингом и поведением элементов на основе определенных условий. В этой статье мы рассмотрим различные методы использования условных директив в Angular, а также приведем примеры кода для каждого подхода.

Метод 1: Директива ngIf
ДирективаngIf — наиболее часто используемая условная директива в Angular. Он позволяет условно отображать или удалять элементы из DOM на основе логического выражения.

<ng-container *ngIf="isLoggedIn">
  <div>Welcome, User!</div>
</ng-container>

Метод 2: Директива ngSwitch
ДирективаngSwitch полезна, когда вам нужно оценить несколько условий. Он позволяет переключаться между различными элементами в зависимости от вычисленного значения выражения.

<div [ngSwitch]="userRole">
  <div *ngSwitchCase="'admin'">Welcome, Admin!</div>
  <div *ngSwitchCase="'user'">Welcome, User!</div>
  <div *ngSwitchDefault>Welcome, Guest!</div>
</div>

Метод 3: директива ngFor с условной отрисовкой
Вы можете комбинировать директивуngFor с условной отрисовкой, чтобы перебирать коллекцию и условно отображать элементы на основе определенных условий.

<div *ngFor="let item of items">
  <div *ngIf="item.isActive">{{ item.name }}</div>
</div>

Метод 4: директива [ngClass]
Директива [ngClass] позволяет условно применять классы CSS к элементам на основе определенных условий.

<div [ngClass]="{'active': isActive, 'disabled': !isActive}">Button</div>

Метод 5: директива [ngStyle]
Директива [ngStyle] позволяет условно применять встроенные стили к элементам на основе определенных условий.

<div [ngStyle]="{'color': isActive ? 'green' : 'red'}">Text</div>

Условные директивы в Angular предоставляют мощные способы управления рендерингом и поведением элементов в зависимости от определенных условий. В этой статье мы рассмотрели несколько методов использования условных директив, включая ngIf,ngSwitch, *ngFor с условным рендерингом, [ngClass] и [ngStyle]. Используя эти методы, вы можете создавать более динамичные и интерактивные приложения Angular.