Update bootstrap progress bar on upload file angular 2
<p>I want to show progress bar's progress when user upload a file, according <a href="https://stackoverflow.com/questions/36352405/file-upload-with-angular2-to-rest-api">this question</a>. here is my code:</p>

<p>Service:</p>

<pre><code>public makeFileRequest(url: string, files: File): Observable&lt;Models.MalFile&gt; {

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

        // for(var i = 0; i &lt; files.length; i++) {
             formData.append("file", files[0], files[0].name);
        // }
        xhr.onreadystatechange =  () =&gt; {
            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) =&gt; {
          this.progress = Math.round( event.loaded / event.total * 100);
          this.progressObserver.next(this.progress);
        }
        xhr.open("POST", url, true);
        xhr.send(formData);
    });
}
</code></pre>

<p>and my Component:</p>

<pre><code>ngOnInit() {

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

  },

  () =&gt; {
    // this.loadedData = 100;
  }

)}
</code></pre>

<p>I want to bind <code>loadedData</code> to progress bar view, but at this moment I log progress in console:</p>

<p><a href="https://i.stack.imgur.com/Wn4yC.png" rel="nofollow noreferrer">upload log screen shot</a> </p>

<p><strong>My problem is:</strong></p>

<p>binding Observable object to progress bar value in view:</p>

<pre><code>              &lt;div class="progress" style=""&gt;
                &lt;progress dir="ltr" class="progress progress-success active progress-striped progress-animated" value="{{loadedData}}" max="100"&gt;  &lt;/progress&gt;
              &lt;/div&gt;
</code></pre>

<p>this code just show progress bar when upload finished (100%)!</p>

<p>How can I bind <code>loadedData</code> to progress bar value?</p>