Як задати динамічний стиль у шаблоні?
В Angular динамічний стиль у шаблоні задається за допомогою директиви [ngStyle] або прив'язки до окремої властивості стилю.
Через [ngStyle]
Дозволяє передавати об'єкт із властивостями CSS:
html
<div [ngStyle]="{ 'color': textColor, 'font-size.px': fontSize }">
Текст з динамічним стилем
</div>textColorіfontSize- властивості компонента..px,.emтощо додаються до властивостей для вказання одиниць виміру.
Через прив'язку до окремого стилю
Можна напряму прив'язувати конкретну властивість CSS:
html
<div [style.background-color]="bgColor">
Блок з динамічним фоном
</div>
<div [style.width.px]="blockWidth">
Блок з динамічною шириною
</div>[style.<ім'я_стилю>]- зв'язує конкретну CSS-властивість з виразом із компонента.- Можна вказувати одиниці через суфікси (
.px,.emтощо).
Таким чином, Angular дозволяє змінювати стилі елементів залежно від стану компонента або даних.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.