Angular - How to apply ngStyle conditions

Question

I have a div that I want to style based on a condition  If styleOne is true I want a background colour of red  If StyleTwo is true  I want the background colour to be blue  I ve got half of it working with the below code       lt div id  quot myDiv quot   ngStyle   quot styleOne  amp  amp    background-color    red   quot  gt   Is it possible to add a condition to say   if styleOne is true  do this if styleTwo is true  do this   Edit I think i ve resolved it  It works  Not sure if it s the best way   lt div id  quot div quot   ngStyle   quot styleOne  amp  amp    background-color    red      styleTwo  amp  amp    background-color    blue   quot  gt

User · Answer

You can use an inline if inside your ngStyle:

[ngStyle]="styleOne?{'background-color': 'red'} : {'background-color': 'blue'}"

A batter way in my opinion is to store your background color inside a variable and then set the background-color as the variable value:

[style.background-color]="myColorVaraible"

User · Answer

lt ion-col size  12  gt     lt ion-card class  box-shadow ion-text-center background-size     ngIf  data    null     ngStyle     background-image    url     data headerImage         gt      lt  ion-card gt

User · Answer

For a single style attribute  you can use the following syntax   lt div  style background-color   quot style1    red     style2    blue    null  quot  gt   I assumed that the background color should not be set if neither style1 nor style2 is true   Since the question title mentions ngStyle  here is the equivalent syntax with that directive   lt div  ngStyle   quot   background-color   style1    red     style2    blue    null    quot  gt

User · Answer

ngStyle     opacity   is mail sent    0 5     1

[angular] Angular - How to apply [ngStyle] conditions

Examples related to angular

Examples related to ng-style