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