Angular – Binding to progress bar

angular

Any idea how to bind the data to progress bar in Angular2? {{}} does not work on the existing attribute like aria-valuenow or value for progress tag. Below is the bootstrap one.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Update with more details

update.service.ts : this is to create the obseverable,

  public _progress$: Observable<number>;
  private _progress: number = 0;
  private _progressObserver: Observer<number>;
  constructor(private _http:Http, private _configurationService: ConfigurationService,private _authenservice:AuthenticationService) {
    this._progress$ = new Observable(observer => {
      this._progressObserver = observer
    });
  }
....
this._progressObserver.next(this._progress); // this is to push in the progress number from xhr.upload.onprogress

home.component.ts: the component where display the progress bar,

  private  _uploadProgressStatus:Observable<number>;// as "asyn" only takes in the promise of observable, I plan to feed _uploadProgressStatus in

  constructor(private _videoManagementService:VideoManagementService,
              private _uploadService:UploadService) {
    console.info('HomeComponent  Mounted Successfully');
    this._uploadProgressStatus = this._uploadService._progress$; 
 this._uploadProgressStatus.subscribe(
  data => {
    console.log('progress = '+data/100);
  }); //if subscribe to this._uploadProgressStatus, no values are received...
this._uploadService._progress$.subscribe(
  data => {
    console.log('progress = '+data/100);
  });
  } // if subscribe to this._uploadService._progress$ ,numbers are received.

home.component.html

  <h4>Uploading...{{ _uploadProgressStatus | async | percent}}</h4>
  <div class="progress">
    <div class="progress-bar" role="progressbar" [style.width]="_uploadProgressStatus | async | percent" aria-valuemin="0" aria-valuemax="100">
      <h4>{{ _uploadProgressStatus | async | percent}} </h4>
    </div>
  </div>

This is not working. So the question is how to create the observable in home.component.ts to receive the numbers ?

in html update _uploadProgressStatus to _uploadService._progress$ is also not working

Best Answer

    var myVar = setInterval(myTimer, 200);
    var a=1;
    function myTimer() {
      a++;
      if(a>=99){a=1;}
      document.getElementById("progress-bar").style.width = a+"%";
      document.getElementById("demo").innerHTML = a+"% Complete";
    }


   function myStopFunction() {
    clearTimeout(myVar);
   }
  /* function myStartFunction() {
    myVar = setInterval(myTimer, 200);
   }*/
    #progress-bar{
    background-color:#00CC00;
    }
   <div class="progress">
      <div class="progress-bar" style="width:70%" id="progress-bar">
        <span id="demo">70% Complete</span>
        
      </div>
    </div>
<button onclick="myStopFunction()">Stop</button>

<!--<button onclick="myStartFunction()">Start</button>-->

Related Topic