angular2 set background color according to some variable value

Question

I have a counter that counts down to 0, and I wanted to set the background color of an element according to the counter value:

Green: 20 or higher
Orange: 10 to 20
Red: 9 or lower

What I did is to apply 3 different classes to the element and give a different condition to each one of them:

<p [class.green]="20 <= counter" [class.orange]="10 <= counter && counter <= 20" [class.red]="10 > counter">
  {{ counter }}
</p>

Is there a better (or at least more corrected) way to achieve the desired outcome?

Possible duplicate of Angular 2 conditional class with *ngClass — anoop
– anoop, Commented May 23, 2017 at 14:43

n00dl3 · Accepted Answer · 2017-05-23 14:50:53Z

2

Well I think about a more concise way using an [ngClass] binding:

[ngClass]="counter>=20?'green':counter>=10?'orange':'red'"

Note that you should avoid putting too much logic inside your template to make it more readable and easier to understand. maybe using a method in your component :

component.ts :

getColor(counter){
  return counter>=20?'green':counter>=10?'orange':'red';
}

template :

[ngClass]="getColor(counter)"

answered May 23, 2017 at 14:50

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

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

Comments

Marc Pérez · Accepted Answer · 2017-05-23 15:55:30Z

0

IMHO it's ok.

An alternative would be to have a function in the component and assign an attribute which would be 'orange', 'green' or 'red', and just use that attribute in the class such as class="{{statusAlert}}". Just an alternative, if you want to have all checkers in the model and not in the template. If you do it like so, that var could be reusable for other elements in your template, whereas using your approach, you should implement it for each element you want to assign that class.

edited May 23, 2017 at 15:55

answered May 23, 2017 at 14:40

Marc Pérez

2933 silver badges9 bronze badges

Collectives™ on Stack Overflow

angular2 set background color according to some variable value

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