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