style binding dynamic, 4 different color - html

Question

I want to style my tabel like this:
I try this code, but for 2 colors.
<table *ngFor="let item of notif">
<tr class="cell" [style.border-color]="item.alarmnr === 1 ? 'green' : 'red' ">
</tr>
</table>
But I need for 4 or more color.
I have 4 alarmnrumber,
alarmnr = 1 --> red
alarmnr = 2 --> blue
alarmnr = 3 --> yellow
alarmnr = 4 --> green
How to implement? Can you suggest me any idea please?
Thnx

Answer 1

I would advise you to do a function in the component something like this :
getColorByAlarmnr(alarmnr: number) : string {
switch(alarmnr){
case 1 : return 'red';
case 2 : return 'blue';
case 3 : return 'yellow';
case 4 : return 'green'
}
}
and in the html :
<table *ngFor="let item of notif">
<tr class="cell" [style.border-color]="getColorByAlarmnr(item.alarmnr)">
</tr>
</table>
Or you can define an object/ a map with key, value pairs for the right colors :
let colors = {
1:'red'
2:'blue'
3:'yellow',
4:'green'
}
and in the html :
<table *ngFor="let item of notif">
<tr class="cell" [style.border-color]="colors[item.alarmnr]">
</tr>
</table>

Answer 2

yes you can create a function in ts file
and return class or style on your logic to a variable and use that variable
to [style.border-color] ="yourvariable"

Answer 3

Try using ngClass for this
<table *ngFor="let item of notif">
<tr class="cell" [ngClass]="{'red': item.alarmnr === 1,
'blue': item.alarmnr === 2,
'yellow': item.alarmnr === 3,
'green' : item.alarmnr === 4}">
</tr>
</table