How to apply a conditional style at angular 8

Question

Good morning

I would like to include a conditional formatting in my project’s css.

This style would change as the product status and status are: New service, In progress, Completed or cancelled.

<p class="finalizado">
    {{ appointment.status }}
</p>

This would be the tag that would change the color according to the information of the appointment.status.

The other classes will be:

.andamento {
   color: #120ecc !important;
}
.solicitado {
   color: #7717c0 !important;
}
.cancelado {
   color: #CC000C !important;
}

Answer 1

You can use ng Class

<p [ngClass]="{
     'sua-classe': appointment.status==='teste',
     'sua-outra-classe': appointment.status==='banana'
}" >