0

I am creating a progress bar using code below.

<td class="pBar">
  <label>{{kpiCriteriaLevel[i]['High_Impact']}}%</label>
  <br/>
  <div class="progress">
    <div class="progress-bar progress-bar-yellow" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width.px': kpiCriteriaLevel[i]['Low_Impact'] }">
    </div>
  </div>
</td>

This part of string interpolation {{kpiCriteriaLevel[i]['High_Impact']}} is coming from component file. But the same value is unable to read in style tag of HTML.

In the inspect element of browser I see - ng-reflect-ng-style="[object Object]" style="width: 0px;"

Please help, how to dynamically add value to width dynamically.

Manojkumar
  • 1,351
  • 5
  • 35
  • 63

1 Answers1

0

You don't need to worry. Angular will update the value automatically as soon as you update the value in the component file as it uses rxjs under the hood.

Yogesh Aggarwal
  • 1,071
  • 2
  • 12
  • 30