Angular ng-style does not apply on FontAwesome icons

Asked May 06 '18 at 11:44

Active May 06 '18 at 11:44

Viewed 342 times

I am simply tyring to change the color of the a fa-square from fontAwseome dynamically using angular and NG-Style. Here is how:

<p><i class="fa fa-square blue" ng-style="{'color': portfolio_risk.values.data.datasets[0].backgroundColor[0]}"></i> {{portfolio_risk.values.data.labels[0]}} </p>

The style seems to just not be applied, cause in the browse when i inspect the element color is still set by the class 'blue', I have also tried to get rid of this class but nothing changes.

asked May 06 '18 at 11:44

0xtuytuy

1,494
6
26
51

which version? V5 or V4 – Temani Afif May 06 '18 at 11:48
the version on npm 1.6.10 – 0xtuytuy May 06 '18 at 11:51
Whats the value you are getting in `portfolio_risk.values.data.datasets[0].backgroundColor[0]` ? – Shashank Vivek May 06 '18 at 12:27
This is the value i get if i print it in html: #FF00000 – 0xtuytuy May 06 '18 at 12:55
`#FF00000` is not a valid color should be `#FF0000` – John Velasquez May 06 '18 at 13:01
Just changed it same problem. – 0xtuytuy May 06 '18 at 13:06
I have even just tried: ng-style="{'color': '#FF0000'}" still no effect – 0xtuytuy May 06 '18 at 13:07
is your class `blue` has **!important** ? if yes removing it might solve your issue – John Velasquez May 06 '18 at 13:10
nope it doesn't, its the standard FontAwesome class, I have tried to put the "!important" in the ngstyle as well no success – 0xtuytuy May 06 '18 at 13:18
Do you have any method that color will change, if yes could you post it here also – John Velasquez May 06 '18 at 18:51
No no other method. – 0xtuytuy May 07 '18 at 07:58

Angular ng-style does not apply on FontAwesome icons

0 Answers0