How to display elements inside an arrayList with two CSS style? - css

Question

I'm writing a code where there's an arrayList having two names in it i.e.Bob & Steve and i want to display them such that if Bob is displayed it should be green in color and if Steve is displayed it should be REd in color.
Component.CSS
.Bob{
font-weight:bold;
color:green;
}
.Steve{
color:red;
}
Component.HTML
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p class="Bob">{{st}}</p>
</div>
<div class="col-2">
<p class="Steve">{{st}}</p>
</div>
</div>
</div>
in Component.Ts
Names:string[]=['Bob','Bob','Steve','Bob','Steve']; in Component.Ts

Answer 1

You can provide class based on condition .
Modify your code like below :
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p [ngClass]="(st=='Bob')?'Bob':'Steve'">{{st}}</p>
</div>
</div>
</div>
Here is the working example :
Working Stackblitz Example

Answer 2

When we have a large number of elements and we can showed it with different background we can adopt several approaches.
Has an array of styles/background and use the index
colors=['red','yellow','green'...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="colors[i]">item.data</div>
</div>
The background was a "property" of "items"
items=[{data:...,color:'Red'},{data:...,color:'yellow'},...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="item.background">item.data</div>
</div>
We can use
[style.css_property]="value"
//or
[className]="class"
//or
[ngClass]="{'class':condition}"
In your case, Aman, I think that it's better that your "items" has a property "class" that was, e.g.
{data:...,class:'bold-true green-true'}
So, when you want add a item, you can make a function
getClass()
{
let class="";
if (this isBold)
class="isBlod-true";
if (this.isCut)
class=class+" isCut-true";
if (this.isGreen)
class=class+" isGreen-true";
...
return class
}
And when you add an item, you can do
items.push({data:...,class:this.getClass()})
Then the code
<div *ngFor="let item of items;let index=i>
<div [className]="item.class">item.data</div>
</div>
make the trick