Angular - How to apply [ngStyle] conditions
[ngStyle]="{'opacity': is_mail_sent ? '0.5' : '1' }"
For a single style attribute, you can use the following syntax:
<div [style.background-color]="style1 ? 'red' : (style2 ? 'blue' : null)">
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:
<div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }">
You can use an inline if inside your ngStyle:
[ngStyle]="styleOne?{'background-color': 'red'} : {'background-color': 'blue'}"
A better 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"