30 seconds of angular
Star
✨✨ New to Angular? Check out interactive Angular Codelab ✨✨

Style bindings

You can use advanced property bindings to set specific style values based on component property values:

<p [style.background-color]="'green'">
      I am in green background
    </p>
    
    <p [style.font-size.px]="isImportant ? '30' : '16'">
      May be important text.
    </p>
    
    

Bonus

<!-- Width in pixels -->
    <div [style.width.px]="pxWidth"></div>
    
    <!-- Font size in percentage relative to the parent -->
    <div [style.font-size.%]="percentageSize">...</div>
    
    <!-- Height relative to the viewport height -->
    <div [style.height.vh]="vwHeight"></div>