Tengo un div al que quiero aplicar estilo en función de una condición.
Si styleOne es verdadero, quiero un color de fondo rojo. Si StyleTwo es verdadero, quiero que el color de fondo sea azul. Tengo la mitad trabajando con el siguiente código.
<div id="myDiv" [ngStyle]="styleOne && {'background-color': 'red'}">¿Es posible agregar una condición para decir:
Editar
Creo que lo he resuelto. Funciona. No estoy seguro si es la mejor manera:
<div id="div" [ngStyle]="styleOne && {'background-color': 'red'} || styleTwo && {'background-color': 'blue'}">Para un solo atributo de estilo, puede usar la siguiente sintaxis:
<div [style.background-color]="style1 ? 'red' : (style2 ? 'blue' : null)"> Asumí que el color de fondo no debería establecerse si ni style1 ni style2 son true .
Dado que el título de la pregunta menciona ngStyle , esta es la sintaxis equivalente con esa directiva:
<div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }">Puede usar una línea si está dentro de su ngStyle:
[ngStyle]="styleOne?{'background-color': 'red'} : {'background-color': 'blue'}"En mi opinión, una mejor manera es almacenar el color de fondo dentro de una variable y luego establecer el color de fondo como el valor de la variable:
[style.background-color]="myColorVaraible"[ngStyle]="{'opacity': is_mail_sent ? '0.5' : '1' }"