arcee123 arcee123 - 1 year ago 144
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?

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download