Angular - NgClass, multiple conditions

Question

I'm looping over an array that contains a varying amount of percentages. However, I would like to add classes based on if an answer from the database equals one of the values from the array.

The below example loops over the values in the array. What i'm trying to do is say, 'if the answer is '0', apply a class with the name 'red', if not, add a class of 'transparent'. If the answer happens to be '20', add a class name of 'amber'. If not, 'transparent'.

I seem to be hitting a wall with the multiple variations that i'm trying.

<div *ngFor="let percent of percentages" 
     [ngClass]="{
         (answer =='0') ? 'red':'transparent',
         (answer =='20') ? 'amber':'transparent',         
     }">
     {{ percent }}
</div>

EDIT - For clarification What I'm attempting to do is simplify the below. This is writing each of the percentages as it's own div. What I'm attempting to do is achieve the same result but by looping through an array of percentages instead.

<div [ngClass]="answer==='0' ? 'red' : 'bg-transparent'"> 0% </div>

<div [ngClass]="answer==='25' ? 'amber' : 'bg-transparent'"> 25% </div>

<div [ngClass]="answer==='50' ? 'orange' : 'transparent'"> 50% </div>

Not everything has to go inside the template. Just create a function for it if it makes life easier for you. :) — Caramiriel
– Caramiriel, Commented May 12, 2020 at 13:28
but in your question answer is general word. so it effect all. so u need add one more property to each element of percentages — Cagri Tacyildiz
– Cagri Tacyildiz, Commented May 12, 2020 at 13:49

Cagri Tacyildiz · Accepted Answer · 2020-05-12 13:36:02Z

3

put other condition to else option part demo

 <div *ngFor="let percent of percentages" 
         [ngClass]="(answer =='0') ? 'red': (answer =='20') ? 'amber':'transparent ">
         {{ percent }}
    </div>

edited May 12, 2020 at 13:36

answered May 12, 2020 at 13:25

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

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

8 Comments

Haven Over a year ago

Thanks for the time! - However, if the answer is 0, it's making all divs come back red, opposed to the single one that has an answer of 0.

Cagri Tacyildiz Over a year ago

Okey is your condition if 0 then red if 20 then amber else transparent ?

Haven Over a year ago

I've updated the question in hope of providing more clarity

Cagri Tacyildiz Over a year ago

but in your question answer is general word. so it effect all. so u need add one more property to each element of percentages

Haven Over a year ago

'answer' is the value from the database. It feels like something like this, but multiple versions should work: answer == percent && answer == '0': 'red'. Just not sure how to do multiple conditions for the other percentages. Do you think that'll work?

|

YogendraR · Accepted Answer · 2020-05-12 13:27:46Z

0

You can use Ternery operator

<div *ngFor="let percent of percentages"
 [ngClass]="{ answer == '0' ? 'red' : answer == '20' ? 'amber' : 'transparent'}">
 {{ percent }}
</div>

answered May 12, 2020 at 13:27

YogendraR

2,40616 silver badges19 bronze badges

Comments

brijmcq · Accepted Answer · 2020-05-12 13:31:45Z

0

How about moving your condition in your component rather than in template?

Something like this

// template
<div *ngFor="let percent of percentages" 
     [ngClass]="foo(answer)">
     {{ percent }}
</div>


foo(answer) {
   if(answer === '0') {
      return 'red';
   }
   if (answer =='20' ) { 
      return 'amber'
   }    

// add more condition here or use a switch statement above.
    return 'transparent';
}

answered May 12, 2020 at 13:31

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

7 Comments

Haven Over a year ago

Thanks for the response! - I've updated the question for more clarity. At the moment this will apply a class of 'red' to all divs within the ngFor. When in fact, it should only be the div that has an answer of 0. Also, if my array had 20 percentage options, this function would be called 20 times?

brijmcq Over a year ago

@Haven even without a function, you will run your condition 20 times ;) that's why I used return right away so that the rest of the code won't run

brijmcq Over a year ago

not sure what you meant by this will apply a class of red to all divs. you can see that they'll only get a class of red when the answer is 0

Haven Over a year ago

I think i'm finding it hard to articulate the requirement. If the answer is 0, only the div that has a percentage of 0 should have a red background. All others shouldn't. Does that make sense?

Caramiriel Over a year ago

@Haven Do you mean something like this by any chance? stackblitz.com/edit/…

|

Eliseo · Accepted Answer · 2020-05-12 15:13:17Z

0

there're a syntax for ngClass that is {'class1':condition1,'class2':condition2...} So I think that is more indicated

<div class="transparent" [ngClass]="{'red':answer == '0',
                                     'amber':answer == '20',
                                     'orange':answer==50}">

answered May 12, 2020 at 15:13

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular - NgClass, multiple conditions

4 Answers 4

8 Comments

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related