Search code examples
angulardata-bindingwidthng-style

Changing the width according to the rating ng-style Angular

I am trying to change the width of this span according to the rating. The 'quality' in this case is from 1 to 5. If the rating is 5 the width should be 100%. How can i bind this with ng-style?

<span class="rating-box" ng-style="{ 'width': {{star.quality*20}} + '%' }"></span>

This code is not working. I am getting this error:

Template parse errors:
Can't bind to 'ng-style' since it isn't a known property of 'span'. ("      <small>Calitate</small>

Thank you very much!

Solution

  • this is syntax mistake for angular 8 you need to use 

    <span class="rating-box" [ngStyle]="{ 'width': star.quality*20 + '%' }"></span>