title: Bootstrap progress bar with angular 2
body: <p>I using bootstrap to show the progress bar. To change the value in the progress bar I am using Angular 2 Attribute Binding.</p>
  
  <pre><code>&lt;div class="progress"&gt;
    &lt;div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax ="100" 
    style="min-width: 2em;" [style.width]="(progress/100)*100 + '%'"&gt;
     {{progress}}%
    &lt;/div&gt;
  </code></pre>
  
  <p>variable progress will be increasing when I upload a file and I am able to see the values in console log.</p>
  
  <pre><code>this.service.progress.subscribe(
  data =&gt; {
      console.log('progress = '+data);
      this.progress = data;
      console.log(this.progress) ;
    });
  </code></pre>
  
  <p>Problem: The progress bar is showing 0 and then 100 once the upload is complete it is not progressing or showing in between values.please suggest.</p>