Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap progress bar with angular 2

I using bootstrap to show the progress bar. To change the value in the progress bar I am using Angular 2 Attribute Binding.

<div class="progress">
  <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 + '%'">
   {{progress}}%
  </div>

variable progress will be increasing when I upload a file and I am able to see the values in console log.

this.service.progress.subscribe(
data => {
    console.log('progress = '+data);
    this.progress = data;
    console.log(this.progress) ;
  });

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.

like image 227
Kiran Kumar Avatar asked Aug 27 '16 02:08

Kiran Kumar


1 Answers

There is no problem in the code. As the uploaded file size is very low it is quickly uploading. When i upload a bigger file it is working as expected.

like image 130
Kiran Kumar Avatar answered Sep 26 '22 02:09

Kiran Kumar