htmlangularng-style

How can you have an IF THEN ELSE in Angular with ngStyle?

I am trying to have rows in a table highlight based on a STATUS value. I can get it working with either yellow or no color by doing:

[ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : ''}"

How can I add another option where if STATUS === 2 it goes to red?

Solution

  • You can create a map object in the ts file

    colorMap = {
    '1': 'yellow',
    '2': 'red',
}

<div [ngStyle]="{'background-color': colorMap[cnresult.STATUS] || ''}"></div>

    By this you can add multiple conditions