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

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

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

1. Директива ngSwitch:
   ДирективаngSwitch позволяет условно отображать элементы на основе определенного значения. Он работает аналогично оператору переключения в JavaScript. Вот пример:

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

1. ngIf-else:
   Хотя в Angular нет встроенной директивы ngIf-else, вы можете добиться того же эффекта, используя переменные шаблона и ngIf. Вот пример:

<div *ngIf="isLoggedIn; else notLoggedIn">
  Welcome, User!
</div>
<ng-template #notLoggedIn>
  <div>
    You are not logged in.
  </div>
</ng-template>

1. ng-container:
   ng-container — это неотображаемый элемент, который можно использовать для группировки нескольких элементов для условной отрисовки без добавления дополнительных элементов в DOM. Вот пример:

<ng-container *ngIf="showContent">
  <p>This content will be displayed conditionally.</p>
  <button (click)="doSomething()">Click Me</button>
</ng-container>

1. ngClass и ngStyle:
   Директивы ngClass и ngStyle позволяют условно применять классы или стили CSS в зависимости от определенных условий. Вот пример:

<div [ngClass]="{ 'highlight': isActive, 'disabled': isDisabled }">
  Content with conditional classes
</div>
<div [ngStyle]="{ 'color': isActive ? 'green' : 'red', 'font-size': isBig ? '20px' : '12px' }">
  Content with conditional styles
</div>

Условный рендеринг — это фундаментальная концепция Angular, которая позволяет разработчикам создавать динамические и интерактивные веб-приложения. В этой статье мы рассмотрели несколько методов реализации условного рендеринга, включая директиву ngIf, директивуngSwitch, шаблон ngIf-else, ng-container и использование директив ngClass и ngStyle. Используя эти методы, вы можете улучшить взаимодействие с пользователем и создавать более отзывчивые приложения на Angular.