Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як задати динамічний стиль у шаблоні?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Динамічний стиль у шаблоні** Angular задається через директиву `[ngStyle]` (об'єкт властивостей CSS) або прив'язку до окремої властивості стилю `[style.<ім'я>]`. **Ключове:** Angular дозволяє змінювати стилі елементів залежно від стану компонента або даних.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняВ 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 дозволяє **змінювати стилі елементів залежно від стану компонента або даних**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.