Условное добавление атрибута в Angular 2: checked и прочее

Быстрый ответ

Для управления наличием атрибута в зависимости от определённого условия в Angular существует привязка к атрибуту [attr.attr-name]. Если у атрибута значение null, он удаляется, в противном случае – добавляется. Взгляните на пример привязки атрибута disabled для кнопки:

<button [attr.disabled]="условие ? '' : null">Нажми меня, если осмелишься!</button>

Атрибут disabled будет присутствовать в том случае, если условие верно, и отсутствовать – если ложно.

Важное различение: привязка к атрибутам и свойствам

В HTML атрибуты и свойства довольно часто не совпадают. Angular также принимает во внимание это различие. К примеру, рассмотрим атрибут value для тега input: атрибут определяет начальное значение, а свойство value отображает текущее значение поля.

Привязка вида [attr.xxx]="..." позволяет Angular автоматически синхронизировать атрибут с соответствующим свойством DOM, если оно доступно. Вручную обрабатывать эту синхронизацию не требуется.

Сравнение прямой привязки к свойствам и привязки к атрибутам

Прямая привязка к свойствам элементов формы обычно более функциональна по сравнению с привязкой к атрибутам. Например, управлять отметкой чекбокса можно так:

<input type="checkbox" [checked]="условие">

Однако, если требуется работать непосредственно с атрибутами, которые не коррелируют с DOM-свойствами, или для установки специфических атрибутов данных, используется синтаксис [attr.xxx]:

<div [attr.data-custom]="условие ? 'значение' : null"></div>

Для булевых атрибутов, которые не имеют значений, их можно установить, используя 'true' или пустую строку, чтобы добавить, и null, чтобы удалить:

<button [attr.disabled]="isDisabled ? '' : null">Кнопка, возможно, нажимаема!</button>

Полный контроль с использованием условных выражений

Привязка атрибутов с условными выражениями усиливает динамику поведения. Таким образом, можно сократить объем логики в компонентах.

Атрибуты aria- повышают доступность и их также можно настраивать условно:

<div [attr.aria-expanded]="isOpen ? 'true' : 'false'"></div>

Овладение этим механизмом позволит создавать настраиваемые комбинации атрибутных директив, сохраняя гибкость Angular.

Отслеживаем изменения в работе с атрибутами в Angular

Подход Angular к обработке атрибутов эволюционировал со временем. Возможно, некоторые помнят даже такие директивы, как NgAttr или NgChecked, которые теперь уступили место более элегантному синтаксису привязки.

Чтобы оставаться в курсе последних обновлений в управлении атрибутами, рекомендуется обратиться к официальной документации Angular, особенно при работе со сложными привязками.

Визуализация

Воспроизведем ситуацию, когда художник подбирает краску в зависимости от погоды:

| Условие              | Цвет           |
| -------------------- | -------------- |
| Солнечный (☀️) день  | Синий (🟦)      |
| Облачный (☁️) день   | Серый (🟪)      |

Таким же образом, как художник выбирает цвета, Angular 2 устанавливает атрибуты, основываясь на условиях:

[attr.color]="isSunny ? 'blue' : undefined"  // Добавляет 'blue', если солнечно, и ничего, если облачно.

Как и художник изменяет цвета, так и Angular изменяет атрибуты в зависимости от условий.

Решение реальных проблем с помощью условных атрибутов

Директива NgClass: Манипулируем классами в зависимости от условий

NgClass используется для контроля над классами:

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

Это позволяет с легкостью переключать различные классы, соответствующие значениям выражений, связанных с ключами объекта.

Подробнее об этом расскажет наш спикер на видео

NgStyle: Ваш помощник в стилизации

NgStyle помогает настраивать инлайн-стили, исходя из состояния компонента или взаимодействия пользователя:

<div [ngStyle]="{'color': isBlue ? 'blue' : 'black', 'font-weight': isBold ? 'bold' : 'normal'}"></div>

Используйте явное исключение null или undefined, чтобы избежать нежелательных атрибутов:

<div [attr.title]="username || ''"></div>

Это предотвратит появление пустых атрибутов, когда username не определен или равен null.

Полезные материалы

1. Angular – официальная документация Angular по синтаксису шаблонов.
2. Angular – API-документация директивы NgClass – официальная API-документация для директивы NgClass.
3. Angular – API-документация директивы NgStyle – официальная API-документация для директивы NgStyle.
4. Angular: условные классы с помощью *ngClass – Stack Overflow – обсуждение применения условных классов в Angular.
5. Учим JavaScript, Angular, React, RxJS, TypeScript – Ultimate Courses – изучение директивы ngIf Angular в глубоком анализе.
6. Angular 2+ Классы с NgClass и NgStyle | DigitalOcean – руководство по использовании NgClass и NgStyle для управления классами и стилями.