How to apply the style within angular expressions

Question

I am having the below line of code which is having two values Absent and Present.If the value is Absent i want make it red colour and bold.I tried by applying style but it is not working.please suggest me how to do it .

code:

<div class="flex-2 bold1">{{attendance.status == 'Absent' ? "style='color:red;font-weight:bold'" :" "}}</div>

Where is the code that you have tried ? Check `ng-class` https://stackoverflow.com/questions/18172573/angular-ng-class-if-else-expression — Shashank Vivek, Apr 16 '18 at 10:33

score 1 · Answer 1 · answered Apr 16 '18 at 10:43

There are two ways to do that:

<div class="flex-2 bold1" ng-style="attendance.status == 'Absent' && {'color':'red','font-weight':'bold'}"></div>

Other is by using class (Recommended)

.highlighted {
    color:red;
    font-weight:bold
}


ng-class="{'highlighted': attendance.status == 'Absent'}"

score 0 · Answer 2 · answered Apr 16 '18 at 11:00

0

using class (Recommended): Create the style in class and mention it in ng-class with conditional operator

ng-class="{attendance.status == 'Absent'?'test': 'test1'}"

answered Apr 16 '18 at 11:00

Gokul

1
1

How to apply the style within angular expressions

2 Answers2