Setting style dynamically in a for loop

Question

I have a condition in my html template that loops through an object and create a list of items. I have studied [NgClass] because I need to set the class of a row based on a condition of that particular item. So my understanding and testing shows that NgClass is set once based on a variable. I want it to check during every loop if true/false. So basically I want <div [ngClass]="{'redclass': {{hour.enoughrest}}}"> However this of course do not work. Any ideas? I have feeling the solution is obvious but I am at loss.

So you want to apply a certain classes based on something only if a 'something else' is true? — Jacopo Sciampi
– Jacopo Sciampi, Commented May 10, 2019 at 9:10
correct but it is different for of course everytime the loop executes — Daantjiekat
– Daantjiekat, Commented May 10, 2019 at 9:29

Mohammadreza Imani · Accepted Answer · 2019-05-10 09:21:46Z

2

Use this format:

 [ngClass]="{'yourClassName': condition}"

answered May 10, 2019 at 9:21

Mohammadreza Imani

3606 silver badges15 bronze badges

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

Comments

Vasco · Accepted Answer · 2019-05-10 09:15:16Z

1

It is definitely possible with ngClass. See if example helps.

e<ng-template ngFor let-item [ngForOf]="folios">
    <tr *ngIf="item.shares >0" [ngClass]="{'table-success': item.gainPercent >5,'table-danger': item.gainPercent <-5}">e

answered May 10, 2019 at 9:15

Vasco

8021 gold badge6 silver badges22 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-05-10 10:08:00Z

0

If you want to apply the class based on a condition, then try this:

<div [class.redclass]="hour.enoughrest">
</div

answered May 10, 2019 at 10:08

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

Denuka · Accepted Answer · 2019-05-10 10:18:36Z

0

There are several ways to change class dynamically.

<div [ngClass]="{'redclass': hour.enoughrest}">

Or

[class.redclass]="hour.enoughrest"

Or if you want to add class based on condition

<div [className]="condition ? 'example-class' : 'other-class'"></div>

In addition to that you can change NgStyle dynamically and update style as bellow if you want to do style changes.

<p [ngStyle] = “{backgroundColor : getColor() }” >

in .ts file
getColor() {
  return this.serverStatus === ‘online’? ‘green’: ‘red’;
}

answered May 10, 2019 at 10:18

Denuka

1,2623 gold badges14 silver badges24 bronze badges

Collectives™ on Stack Overflow

Setting style dynamically in a for loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related