Bootstrap progress bar with angular 4

Question

I am new to angular and i am unable to understand how to use bootstrap progress bar with Angular.

Below is the bootstrap documentation

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

I am trying to get the above result using angular. The width % is stored in a variable {{capacity.available}}

So i am doing the following but its not giving me the expected result.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{capacity.available}}">
        60%
      </div>
    </div>

Warning message in the console looks like sanitizing unsafe style value width:54

What am i doing wrong? Any suggestions on how this can be done?

Thank you for any help in advance

Answer 1

Replace

style="width:{{capacity.available}}%"

with this (done in angular way)

[style.width]="capacity.available + '%'"

Answer 2

You can also set;

[ngStyle]="{width: capacity.available + '%'}"  

Answer 3

try with this for progress bar with label (value),

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="{{capacity.available}}" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: capacity.available + '%'}">
   {{capacity.available}}%
   </div>
</div>

Example,

capacity.available = 14