Binding to progress bar

Question

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

Answer 1

It should be pretty simple. Here's an example of a working component:

import { Component } from 'angular2/core'

@Component({
  selector: 'my-special-component',
  template: `
    <div class="progress">
      <div class="progress-bar" role="progressbar" [style.width]="myProgress | percent">
        <span class="sr-only">{{ myProgress | percent" }} Complete</span>
      </div>
    </div>
  `
})
export class MySpecialComponent {
  // A number from 0 to 1
  private myProgress: number

  constructor() {}
}

The important bit is here: [style.width]="myProgress | async | percent" This is a one way binding against the CSS width property. The async pipe ensures the value remains updated even as myProgress changes. The percent pipe transforms the value to a string like 70%.

---

A more advanced example- You will likely want to use something like Input() or even a Rx.js observable to represent the myProgress variable. This will even work with promises. You will want to use the async pipe in this situation:

import { Component, ChangeDetectionStrategy } from 'angular2/core'

@Component({
  selector: 'my-special-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="progress">
      <div class="progress-bar" role="progressbar" [style.width]="myProgress | async | percent">
        <span class="sr-only">{{ myProgress | async | percent" }} Complete</span>
      </div>
    </div>
  `
})
export class MySpecialComponent {
  // A number from 0 to 1
  Input() myProgress: number

  constructor() {}
}

Now if you were to change this value elsewhere, say in a parent component:

import { Component } from 'angular2/core'
import { MySpecialComponent } from './my-special-component.ts'

@Component({
  selector: 'root-component',
  directives: [ MySpecialComponent ],
  changeDetection: ChangeDetectionStrategy.OnPush
  template: `
    <my-special-component [myProgress]="rootProgress"</my-special-component>
  `
})
export class RootComponent {
  // A number from 0 to 1
  private rootProgress: number

  constructor() {
    this.rootProgress = 0.5
  }
}

^^ in this example we have 2 components: MySpecialComponent as the child, and RootComponent as the parent. As you can see, MySpecialComponent doesn't have the myProgress value explicitly set anywhere. However, it will resolve as 0.5 because we set it in RootComponent and bind that to MySpecialComponent's myProgress Input() binding.

Answer 2

    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>-->