Style Binding
- Add inline styles based on some condition
- Use the style properties of the object.
- List of style properties: https://www.w3schools.com/jsref/dom_obj_style.asp
Single style binding
- Note that a style property name can be written in either dash-case, as shown above, or camelCase, such as fontSize.
<button [style.backgroundColor]="isActive ? 'blue': 'red'">Save</button>
<button [style.background-color]="isActive ? 'blue': 'red'">Save</button>
Multi-style binding
[style]="styleExpr"
string
[style]="'width: 100px; height: 100px; background-color:powderblue'"
object
[style]="{width: '100px', height: '100px', backgroundColor: 'lightblue'}"