title: Bootstrap progress bar with angular 4
body: <p>I am new to angular and i am unable to understand how to use bootstrap progress bar with Angular.</p>
  
  <p>Below is the bootstrap documentation</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;div class="progress"&gt;
    &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"&gt;
      60%
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to get the above result using angular. The width % is stored in a variable {{capacity.available}}</p>
  
  <p>So i am doing the following but its not giving me the expected result. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
      &lt;div class="progress"&gt;
        &lt;div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{capacity.available}}"&gt;
          60%
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Warning message in the console looks like 
  <strong>sanitizing unsafe style value width:54</strong></p>
  
  <p>What am i doing wrong? Any suggestions on how this can be done?</p>
  
  <p>Thank you for any help in advance</p>