2

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

Warty
  • 7,237
  • 1
  • 31
  • 49
arcee123
  • 101
  • 9
  • 41
  • 118

1 Answers1

1

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();
    $.ajax({
      type: 'GET',
      url: 'http://google.com',
      xhr: function() {
        var xhr = new window.XMLHttpRequest(),

        xhr.addEventListener("progress", (evt) => {
         this.percentage$.next(parseInt(evt.loaded / evt.total * 100, false) + '%');
        }, false);
        return xhr;
      }
    });
  }
}
Community
  • 1
  • 1
codef0rmer
  • 10,284
  • 9
  • 53
  • 76
  • ok. so my question here is then you would have to use an observable to manage the percentage in the Component? – arcee123 Jul 18 '16 at 14:19
  • @arcee123 You can use EventEmitter to emit new percentage value and subscribe to it in components to be used in the view (updated code above). – codef0rmer Jul 18 '16 at 15:35