Based on Array index value style the HTML element

Question

I wanted to style the html elements based on array index value > 4

<div *ngFor="let e of arr ; let i = index" > 
(i > 4 ) ? <p [ngClass]="['clr']" [ngStyle]="{'background-color': 'blue'}"> {{e}} </p>  :  <p> {{e}} </p> 
</div>

I wanted to check condition inside the loop. But it just printed as string with out checking condition.

Read through this article - you will get the answer - ng2.codecraft.tv/built-in-directives/ngstyle-and-ngclass — Wand Maker
– Wand Maker, Commented Jul 10, 2018 at 18:59
Can someone please help me to understand what is wrong in my approach. why it is printing string without checking the condition — Vignesh R
– Vignesh R, Commented Jul 10, 2018 at 19:24

Igor · Accepted Answer · 2018-07-10 18:59:49Z

3

One way to solve it is using *ngIf

<div *ngFor="let e of arr ; let i = index">
    <p *ngIf="i > 4" [ngClass]="['clr']" [ngStyle]="{'background-color': 'blue'}"> {{e}} </p>
    <p *ngIf="i <= 4"> {{e}} </p> 
</div>

Another is to use conditional classes using ngClass

<div *ngFor="let e of arr ; let i = index">
    <p [ngClass]="{'clr-blue' : i > 4}"> {{e}} </p>
</div>

answered Jul 10, 2018 at 18:59

Igor

62.5k10 gold badges111 silver badges181 bronze badges

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

Comments

diopside · Accepted Answer · 2018-07-10 19:01:57Z

1

The least verbose way would probably be to simply put the conditional inside the ngClass or ngStyle statement.

[ngClass]=" i > 4 ? 'whateverClass' : 'whateverOtherClass'"

or

[ngStyle]="{'background-color' : ((i > 4) ? 'blue' : 'red') }"

Or any variation of these

answered Jul 10, 2018 at 19:01

diopside

3,05213 silver badges23 bronze badges

Collectives™ on Stack Overflow

Based on Array index value style the HTML element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related