Menu
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"> 
409
The NgClass Directive in AngularThe NgClass directive allows you to set the CSS class dynamically for a DOM element. When using an object literal, the keys are the classes which are added to the element if the value of the key evaluates to true.
Dynamic means, that the components location in the application is not defined at buildtime. That means, that it is not used in any angular template. Instead, the component is instantiated and placed in the application at runtime.
ngStyle is an Angular directive that gives you the flexibility to do this, where as style is a regular HTML property to which you can only bind values one by one. That's the difference between the two of them.
[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
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
