Suggest an editImprove this articleRefine the answer for “How to set a dynamic style in a template?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**A dynamic style in an Angular template** is set through the `[ngStyle]` directive (an object of CSS properties) or a binding to an individual style property `[style.<name>]`. **Key point:** Angular allows changing element styles depending on the component's state or data.Shown above the full answer for quick recall.Answer (EN)ImageIn Angular, a dynamic style in a template is set using the `[ngStyle]` **directive** or a **binding to an individual style property**. ## Via `[ngStyle]` Allows passing an object with CSS properties: ```html <div [ngStyle]="{ 'color': textColor, 'font-size.px': fontSize }"> Text with a dynamic style </div> ``` - `textColor` and `fontSize` are component properties. - `.px`, `.em`, etc. are added to properties to specify units. ## Via binding to an individual style You can bind a specific CSS property directly: ```html <div [style.background-color]="bgColor"> A block with a dynamic background </div> <div [style.width.px]="blockWidth"> A block with a dynamic width </div> ``` - `[style.<style-name>]` binds a specific CSS property to an expression from the component. - Units can be specified via suffixes (`.px`, `.em`, etc.). This way, Angular allows **changing element styles depending on the component's state or data**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.