Bootstrap progress bar with angular 2

Question

I use bootstrap to show a progress bar. To change the value in the execution line, I use 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 increase when the file is downloaded, and I can see the values ​​in the console log.

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

Problem: the progress bar shows 0 and then 100, once the download is complete, it does not progress or is not displayed between values. Assume that.

Answer 1

There are no problems in the code. Since the downloaded file size is very low, it loads quickly. When I upload a larger file, it works as expected.