Style Binding and ngStyle

Adds and removes a set of HTML styles.

Setting inline styles with NgStyle

Use NgStyle to set multiple inline styles simultaneously, based on the state of the component.

  1. To use NgStyle, add a method to the component class. In the following example, setCurrentStyles() sets the property currentStyles with an object that defines three styles, based on the state of three other component properties.
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>
Was this page helpful?
Yes No