CODEWITHSUNDEEP
htmlcssangular
user8631713
user8631713

Reputation:

CSS property with Condition

I am working Angular Application. I need to display the color of the card according to the condition without duplicating (i.e) creating two cards and displaying with hide and show property.

Example

value of A can yes or no in Array

<div class="card">
<div class="card-titile">Sample</div>
<div class ="card-body">
`
`
`             //Some codes
`
`
`
</div>
</div>

If value of A is yes I have to display this card in red and If no, I have to display it in yellow.

Upvotes: 0

Views: 287

Answers (3)

לבני מלכה
לבני מלכה

Reputation: 16251

You can use [style.color]

<div [style.color]="A == 'yes' ? 'red' : 'yellow'"></div>

If you want to add multi style use ngClass

 <div [ngClass]="A == 'yes' ? 'red' : 'yellow'"></div>

See working code

Upvotes: 1

siddharth shah
siddharth shah

Reputation: 1147

You can use ngClass in dom element like

<div [ngClass]="{'red-class': A === 'yes','yellow-class':A === 'no'}">

or you can also apply style conditionally like

<div [ngStyle]="{'color':A == 'yes' ? 'red' : 'yellow'}"></div>

Upvotes: 0

Jonathan Wilson
Jonathan Wilson

Reputation: 4305

Using an angular expression, add the contents of A as a class to the card. Then, with css, declare appropriately colored styles for those classes.

Upvotes: 0

Related Questions