arcee123 arcee123 - 1 month ago 8x
Javascript Question

how to track progress in angular 2 service call

I'm told that we use services to talk to the database or other data repository. while the query is in execution, I'd like to be able to put up a progress bar on the UI.

How do you track percent complete?


You can either refer this to do it sanely with angular2 HTTP module.

Otherwise the same can be done with XHR progress event in jQuery:

import { Subject } from 'rxjs/Subject';
export class ProgressLoader {
  percentage$: Subject<any>;

  constructor() {
    this.percentage$ = new Subject();
      type: 'GET',
      url: '',
      xhr: function() {
        var xhr = new window.XMLHttpRequest(),

        xhr.addEventListener("progress", (evt) => {
         this.percentage$.next(parseInt(evt.loaded / * 100, false) + '%');
        }, false);
        return xhr;