[style.] binding

You can set inline styles with a style binding.

Style binding syntax resembles property binding. Instead of an element property between brackets, start with the prefix style, followed by a dot (.) and the name of a CSS style property: [style.style-property].

Source

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

export class AppComponent {
  isSpecial = true;
  canSave = false;
}

Result

Some style binding styles have a unit extension. The following example conditionally sets the font size in “em” and “%” units .

Source

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

export class AppComponent {
  isSpecial = true;
}

Result

Note that a style property name can be written in either dash-case, as shown above, or camelCase, such as fontSize.

While this is a fine way to set a single style, the NgStyle directive is generally preferred when setting several inline styles at the same time.