1. Директива ngClass:
   Директива ngClass в Angular позволяет нам условно добавлять или удалять классы CSS на основе оценки выражений. Он предоставляет мощный способ динамического применения стилей. Вот пример:

<div [ngClass]="{ 'highlight': isHighlighted, 'error': hasError }">...</div>

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

<div [ngStyle]="{ 'font-size.px': fontSize, 'color': fontColor }">...</div>

1. Пользовательские директивы.
   Мы можем создавать собственные директивы в Angular для инкапсуляции сложной логики условного стиля. Эти директивы можно использовать повторно, и они предоставляют простой способ управления стилями в зависимости от конкретных условий. Вот упрощенный пример:

<div appCustomDirective [isActive]="isActive">...</div>

1. Переменные шаблона и ngIf:
   Используя переменные шаблона и директиву ngIf, мы можем условно применять стили к элементам или компонентам на основе оценки выражений. Такой подход обеспечивает гибкость и контроль. Рассмотрим следующий фрагмент кода:

<div *ngIf="showElement; else elseBlock" #myElement>...</div>
<ng-template #elseBlock>...</ng-template>

1. Привязка хоста:
   Привязка хоста Angular позволяет нам привязывать свойства или атрибуты директивы или компонента к элементу хоста. Это эффективный способ условного применения стилей к основному элементу на основе определенных условий. Вот пример:

@HostBinding('class.highlight') isHighlighted: boolean = true;

1. Препроцессоры CSS.
   Использование препроцессоров CSS, таких как Sass или Less, в проекте Angular предоставляет дополнительные возможности для условного оформления. Эти препроцессоры предлагают примеси, переменные и функции, которые позволяют нам писать более краткие и удобные в обслуживании таблицы стилей.

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