CODEWITHSUNDEEP
angular
Imad
Imad

Reputation: 7490

Set style dynamically in Angular

I have following markup

<tr *ngFor='let activity of pagedWorkflowActivities' style="background-color:{{activity.status == 'Pending' ? 'red' : 'green'}}">
.
.
.
.
</tr>

As it says, if activity.status field is pending then make background color red otherwise green. But it doesn't work. After inspecting I found it renders it like

<tr ng-reflect-style="unsafe">

Upvotes: 66

Views: 123393

Answers (3)

Nishat Tasnim Mithila
Nishat Tasnim Mithila

Reputation: 49

Try this one:

[ngStyle]="{'border': user?.keyResults.percentage > 50 ? '3px solid green' : '3px solid red' }"

Upvotes: 4

ElasticCode
ElasticCode

Reputation: 7875

bind- prefix alternative can be used also as below

bind-style.background-color="activity.status == 'Pending' ? 'red' : 'green'"

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658027

[style.background-color]="activity.status == 'Pending' ? 'red' : 'green'"

or

[ngStyle]="{'backgroundColor': activity.status == 'Pending' ? 'red' : 'green' }"

For your rendering result see also In RC.1 some styles can't be added using binding syntax

Upvotes: 154

Related Questions