Update bootstrap progress bar on upload file angular 2

Question

I want to show progress bar's progress when user upload a file, according this question . here is my code:

Service:

public makeFileRequest(url: string, files: File): Observable<Models.MalFile> {

    return  Observable.create ((Observable) => {
        var formData: any = new FormData();
        var xhr = new XMLHttpRequest();
        console.log(files[0]);

        // for(var i = 0; i < files.length; i++) {
             formData.append("file", files[0], files[0].name);
        // }
        xhr.onreadystatechange =  () => {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    Observable.next(JSON.parse(xhr.response));
                    Observable.complete();
                } else {
                    Observable.error(xhr.response);
                    alert(xhr.response);
                }
            }
        }
        xhr.upload.onprogress = (event) => {
          this.progress = Math.round( event.loaded / event.total * 100);
          this.progressObserver.next(this.progress);
        }
        xhr.open("POST", url, true);
        xhr.send(formData);
    });
}

and my Component:

ngOnInit() {

this.service.progress.subscribe(
  data => {
    this.loadedData = data;
    console.log("data:",this.loadedData);
    //this.loadedData.bind(data)  ;
  },
  (error) => {
    console.log('Could not to upload file');

  },

  () => {
    // this.loadedData = 100;
  }

)}

I want to bind loadedData to progress bar view, but at this moment I log progress in console:

upload log screen shot

My problem is:

binding Observable object to progress bar value in view:

              <div class="progress" style="">
                <progress dir="ltr" class="progress progress-success active progress-striped progress-animated" value="{{loadedData}}" max="100">  </progress>
              </div>

this code just show progress bar when upload finished (100%)!

How can I bind loadedData to progress bar value?

Answer 1

I assume this.loadedData gets proper data which you want. Then do following,

<div class="progress" style="">
     <progress dir="ltr" 
               class="progress progress-success active progress-striped progress-animated" 
               value="loadedData"      //<<<===removed {{ }} curly braces.
               max="100">  
      </progress> 
</div>