Angular2 / RxJS - updating variable after getting data from Http observable

Question

I would like to turn on my loader icon (e.g. spinner) isLoaderEnabled when data starts to download from API and turn it off when successfully received. What would be a proper way to turn it off?

Here is my following code.

My component:

this.isLoaderEnabled = true;
this.meetingService.getList();

My service:

getList() {
  this._http.get('../fake-data/someFile.json')
    .map(response => response.json())
    .subscribe(
      data => {
        this.dataStore.meetingList = data;
        this.meetingListObserver.next(this.dataStore.meetingList);
      },
      err => console.log('>>>', 'Could not load meetings list. Error: ', err),
      () => console.log('>>>', 'Done with getting meetings list.')
    );
}

Thank you.

Thierry Templier · Accepted Answer · 2016-04-12 07:40:39Z

8

I think that your issue is trickiest than it appears at a first sight ;-) In fact, XHR doesn't support streaming so when the first callback registered within the subscribe method is called you already received all the data.

That said XHR supports the onprogress event (see this plunkr: http://plnkr.co/edit/8MDO2GsCGiOJd2y2XbQk?p=preview). This allows to get hints about the progress of the download. This isn't supported out of the box by Angular2 but you

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor(private service:ProgressService) {}
  build(): any {
    let xhr = super.build();
    xhr.onprogress = (event) => {
      service.progressEventObservable.next(event);
    };
    return <any>(xhr);
  }
}

and override the BrowserXhr provider with the extended:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

The progress service could be implemented this way:

export class ProgressService {
  progressEventObservable:Subject<any> = new Subject();
}

Your service could subscribe on the progress service to be notified when the download actually starts (i.e. the first time the next method of progressEventObservable is called for the request):

getList() {
  var subscription = this.progressService.subscribe(event => {
    if (!this.spinner) {
      this.spinner = true;
    }
  });
  this._http.get('../fake-data/someFile.json')
    .map(response => response.json())
    .do(val => this.spinner = true)
    .subscribe(
      data => {
        this.dataStore.meetingList = data;
        this.meetingListObserver.next(this.dataStore.meetingList);
      },
      err => (...),
      () => {
        this.spinner = false;
        subscription.unsubscribe();
      })
    );
}

Edit

If you want to use the spinner within the component and not the service. You could use a dedicated observable / subject, as described below:

spinner$: Subject<boolean> = new Subject();
spinner: boolean = false;

getList() {
  var subscription = this.progressService.subscribe(event => {
    if (!this.spinner) {
      this.spinner = true;
      this.spinner$.next(this.spinner); // <-------
    }
  });
  this._http.get('../fake-data/someFile.json')
    .map(response => response.json())
    .do(val => this.spinner = true)
    .subscribe(
      data => {
        this.dataStore.meetingList = data;
        this.meetingListObserver.next(this.dataStore.meetingList);
      },
      err => (...),
      () => {
        this.spinner = false;
        this.spinner$.next(this.spinner); // <-------
        subscription.unsubscribe();
      })
    );
}

The component can subscribe on spinner$ to be notified of changes:

@Component({
  (...)
})
export class SomeCOmponent {
  constructor(private meetingService:MeetingService) {
    this.meetingService.spinner$.subscribe((spinner) {
      this.isLoaderEnabled = spinner;
    });
  }
}

edited Apr 12, 2016 at 7:40

answered Apr 11, 2016 at 17:26

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

be-codified Over a year ago

One thing more, I am having my spinner in my component (not the service). This changes things?

Thierry Templier Over a year ago

You're welcome! You need to subscribe in the component if your spinner is in it...

be-codified Over a year ago

Could you elaborate this? I am having two files, one is component (this is where spinner gets state true or false; service is called), the other one is service - please see the initial question.

Thierry Templier Over a year ago

Yes, sure! I updated my answer to be close to your classes.

be-codified Over a year ago

Thierry much appreciated, thank you again! I will dive into it.

|

Günter Zöchbauer · Accepted Answer · 2016-04-11 16:22:06Z

2

getList() {
  this._http.get('../fake-data/someFile.json')
    .map(response => response.json())
    .do(val => this.spinner = true)
    .subscribe(
      data => {
        this.dataStore.meetingList = data;
        this.meetingListObserver.next(this.dataStore.meetingList);
      },
      err => console.log('>>>', 'Could not load meetings list. Error: ', err),
      () => this.spinner = false)
    );
}

answered Apr 11, 2016 at 16:22

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

be-codified Over a year ago

Thank you. Again :) I doubt this would work as I am having component and service in separate files?

Günter Zöchbauer Over a year ago

I see. Thierrys answer shows how to notify interested components using an Observable.

kemsky · Accepted Answer · 2016-04-11 16:43:48Z

1

You need to make few tricks to make it work properly:

    //use Observable.from as lock trigger BEFORE request is sent
    var request:Observable<Response> = Observable.from([1], null).do(()=>
    {
        lock.lock();
    }).flatMap(()=>
    {
        //use finally to unlock in any case
        return this.http.post(url, body, options).finally(()=>
        {
            lock.unlock();
        });
    });
    //share sequence to avoid multiple calls when using several subscribers
    return request.share();

answered Apr 11, 2016 at 16:43

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Comments

Mark Rajcok · Accepted Answer · 2016-04-11 21:43:42Z

0

If your component subscribe()s to the meetingListObserver, just turn it off in the subscribe callback function.

If not, add another Observable or a Subject to the service and have the component subscribe to it. When the data comes back from the service, call next() on the Observable or Subject. For an example of using a Subject in a service, see https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

answered Apr 11, 2016 at 21:43

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Collectives™ on Stack Overflow

Angular2 / RxJS - updating variable after getting data from Http observable

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related