How to use ngClass with conditional statements

Question

The color of my mat icon element should change dynamically.

<mat-icon class="temperature icon" svgIcon="thermometer-alert" matTooltip = {{temp_tooltip}}
          aria-label="Icon that displays a tooltip when focused or hovered over"
          [ngClass]= "{
            'safe' : 23 <= temp_tooltip <= 24.5,
            'alarm_lowside' : 21 <= temp_tooltip < 23,
            'alarm_highside' : 24.5 < temp_tooltip <= 26, 
            'critical_lowside' : temp_tooltip < 21,
            'critical_highside' : temp_tooltip > 26
           }" >
        </mat-icon>

temp_tooltip value is binded in component.ts

and css have the color styling

.safe {
 color: green
}

.alarm_lowside {
    color: yellow
}

.alarm_highside {
    color: yellow
}

.critical_lowside {
    color: red
}

.critical_highside{
    color: red
}

it works fine with critical_lowside and critical_highside classes, but not for the other classes. How to correct. Is the way ngClass is defined is it correct?

Change your condition to this: temp_tooltip >= 23 && temp_tooltip <= 24.5, ... do the same for all. — FAISAL
– FAISAL, Commented Apr 17, 2019 at 14:14

Askirkela · Accepted Answer · 2019-04-17 14:16:40Z

2

23 <= temp_tooltip <= 24.5 is not a correct expression in javascript/typescript.

You should find another way to phrase this condition like 23 <= temp_tooltip && temp_tooltip <= 24.5

answered Apr 17, 2019 at 14:16

Askirkela

1,21911 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FAISAL · Accepted Answer · 2019-04-17 14:18:16Z

2

The correct syntax would be this:

 [ngClass]= "{
        'safe' : temp_tooltip >= 23 && temp_tooltip <= 24.5,
        'alarm_lowside' : temp_tooltip >= 21 && temp_tooltip < 23,
        'alarm_highside' : temp_tooltip > 24.5 && temp_tooltip <= 26, 
        'critical_lowside' : temp_tooltip < 21,
        'critical_highside' : temp_tooltip > 26
   }"

answered Apr 17, 2019 at 14:18

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Collectives™ on Stack Overflow

How to use ngClass with conditional statements

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related