0

Necesito cambiar el color de un botón según si es 0 o 1
en el HTML :

    <tr class="text-white" *ngFor="let item of Velas;let i = index">
            <td class="text-center"> {{i+1}}</td>
            <td class="text-center">{{item.codigo}}</td>
            <td class="text-center">{{item.nombre}}</td>
            <td class="text-center" style="list-style:none;"><button type="button" 
      class="btn btn-sm m-2" [ngStyle]="{'font- weight':'bolt','color':'white','font-size':'18px','background':getColorCard(item.encendi)}" >POWER</button>

            </td>
</tr>

y en el componente intente esto pero no me funciona:

 getColorCard(encendi) {

  switch (encendi) {
    case 0:
      return this.color = 'green';

    case 1:
      return this.color = 'red';

  }

}

2 respuestas 2

2

Puedes usar ngClass: defines dos clases CSS para los dos estados y eliges la que corresponda en cada momendo:

<button type="button" class="btn btn-sm m-2" [ngClass]="{ greenClass: encendi, redClass: !encendi}" >POWER</button>
1
  • Gracias Pablo me da error , no se si te diste cuenta q estoy trayendo {{item.encendi}} desde una base de datos mysql (campo nombre=encendi y es tinyint(1)). si yo pongo <td>{{item.encendi}}</td> me pinta 0 y 1 en el html, yo intento q esos 0 y 1 sean botones rojos o verde según corresponda .
    – Adrian
    Commented el 22 ene. 2020 a las 14:38
0

¡Lo logré así!

<button type="button" class="btn btn-sm m-2 greenClass"
 [class.redClass]="item.encendi =='0'" >POWER</button>
2
  • Equivocadisimo!!! soy el autor de la pregunta y estoy aportando como lo solucione no podes decirme q no es la repuesta .
    – Adrian
    Commented el 22 ene. 2020 a las 15:43
  • Deberías dar una explicación clara de lo que hiciste, por si alguien tiene el mismo error saber realmente qué se hizo. Saludos!
    – jsdnlb
    Commented el 22 ene. 2020 a las 15:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.