How to apply an API figure to Bootstrap progress bar in Angular 6?

Question

I'm new to Angular 6 and I've just managed to achieve calling API's into table rows

<tr *ngFor="let stats of stats$">
  {{ stats.StoragePercentage }}%
</tr>

This calls percentage figures into tables and I now want to add bootstrap progress bars alongside these figures to highlight this. I came across this Stack Overflow question: Change bootstrap progress-bar width from angularjs and tried the answers provided there with no luck. To me, what I have right now, that still doesn't work is the following:

<tr *ngFor="let stats of stats$">
  <div class="progress">
    <div class="progress-bar" 
      role="progressbar"
      ng-style="width: {{ stats.StoragePercentage }}"
      aria-valuenow="{{ stats.StoragePercentage }}"
      aria-valuemax="100">
        {{ stats.StoragePercentage }}%
    </div>
  </div>
</tr>

The errors I get are:

What am I doing wrong?

Answer 1

One thing you are not doing correctly is using ng-style which is AngularJS directive and not for Angular 2+. Try the below:

<tr *ngFor="let stats of stats$">
  <div class="progress">
    <div class="progress-bar" 
      role="progressbar"
      [ngStyle]="{'width': stats.StoragePercentage + '%'}"
      aria-valuenow="{{ stats.StoragePercentage }}"
      aria-valuemax="100">
        {{ stats.StoragePercentage }}%
    </div>
  </div>
</tr>

Answer 2

Like the error message says, the ng-style property is a isn't a know property.

Please see here

<tr *ngFor="let stats of stats$">
  <div class="progress">
    <div class="progress-bar" 
      role="progressbar"
      [ngStyle]="width: {{ stats.StoragePercentage }}"
      aria-valuenow="{{ stats.StoragePercentage }}"
      aria-valuemax="100">
        {{ stats.StoragePercentage }}%
    </div>
  </div>
</tr>