CODEWITHSUNDEEP
javascriptangular
julia
julia

Reputation: 43

assign ngStyle according to a condition

I want to change the background-color of a li according to the score of the vote: heigh or low

<div *ngIf="upvote > downvote" [ngStyle]="{background-color: hsla(120, 100%, 50%, 0.3);}" >

Upvotes: 0

Views: 457

Answers (4)

SeanMC
SeanMC

Reputation: 2366

you should probably create 2 classes, one for each style. Then you can use ngClass. Example below where you have 2 classes named red or blue. The condition is made up. you can put whatever you want there

 <div [ngClass]="{'blue': vote == 'high', 'red': vote == 'low'}"></div>

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected use below option of checking condition inside ngStyle and issue from your code is that div will be not available when downvote > upvote due to ngIf

Other minor observations
1. Use quotes around background-color and color
2. Remove ngIf to handle both conditions (upvote > downvote , downvote > upvote) and move condition inside ngStyle

<div [ngStyle]="{'background-color': upvote > downvote? 'red': 'blue'}" >
Test
  </div>

Code sample - https://stackblitz.com/edit/angular-ssy7uo?file=src/app/app.component.html

Note: Use ngClass to handle more CSS properties to avoid handling too many entries with ngStyle

Upvotes: 0

Abhishek
Abhishek

Reputation: 1778

I think in your case this code is work.

<div *ngIf="upvote > downvote" [ngStyle]="{'background-color':check=== 'upvote ' ? hsla(120, 100%, 50%, 0.3) : hsla(100, 20%, 40%, 0.5) }"></div>

Upvotes: 0

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

If you want to change background colour on upvote is greater than downvote you can do it as follows.

<div [ngStyle]="{ background-color: (upvote > downvote) ? hsla(120, 100%, 50%, 0.3) : white }" >

Upvotes: 0

Related Questions