Know when http requests are finished from provider in Angular2

Question

I created a provider like this:

import {Injectable, Provider, Inject} from 'angular2/core';
import {Http, Response, Headers} from 'angular2/http';
import {Platform, Storage, SqlStorage,LocalStorage} from "ionic-angular";


@Injectable()
export class MyProvider {


    constructor(@Inject(Platform)platform,@Inject(Http)http) {    
        this.http = http;
    }


    GetSomeOtherStuff() {

            var headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');

            this.http.post(
                        'http://localhost:3000/getotherstuff',
                        {headers: headers}
                    ).map(
                        (res:Response)=>res.json())
                        .subscribe(
                            (response) => {

                               //my response now can be used

                            },
                            (err) => {

                            },
                            () => {

                            }
                        ); //end of subscribe

    }


     GetSomeStuff() {

            var headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');

            this.http.post(
                        'http://localhost:3000/getstuff',
                        {headers: headers}
                    ).map(
                        (res:Response)=>res.json())
                        .subscribe(
                            (response) => {

                               //my response now can be used

                            },
                            (err) => {

                            },
                            () => {

                            }
                        ); //end of subscribe

    }

I then have a page. Inside of this page I would like when a user comes to it to call the provider getstuff() and getotherstuff() functions to get some data. While the data is loading a little spinner should show, but when the requests finish the page should know about this.

@Page({
    templateUrl: 'build/pages/mypage/mypage.html',
    providers: [MyProvider]
})

export class MyPage {

   isLoadingSpinner = False;

    constructor(_providerMessages: ProviderMessages) {

       //when this page is come upon I would like to get the data from getstuff and getothersstuff.
       // when it loads it should go into these two varaibles to be displayed on the page.

       isLoadingSpinner = True; //page is laoding so show spinner

       this.first_data = //getstuff from provider when loaded
       this.second_data = //getotherstuff from provider when loaded

       isLoadingSpinner = false; //page is done loading


        }

    }

}

Essentially I would like the page to display the data when it is loaded, but when we are still waiting for the response I should be able to capture that state too so I could show the spinner

see this [question](http://stackoverflow.com/questions/36554125/angular2-rxjs-updating-variable-after-getting-data-from-http-observable/36554544) — kemsky, Apr 22 '16 at 00:07

Ankit Singh · Answer 1 · 2016-04-22T04:36:10.067

Provider

@Injectable()
export class MyProvider {

  constructor(@Inject(Platform)platform, @Inject(Http) http) {
    this.http = http;
  }

  GetSomeOtherStuff() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post(
      'http://localhost:3000/getotherstuff',
      {headers: headers}
    ).map((res: Response)=>res.json());

  }

  GetSomeStuff() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    return this.http.post(
      'http://localhost:3000/getstuff',
      {headers: headers}).map((res: Response)=>res.json());

  }
}

Component

@Page({
  templateUrl: 'build/pages/mypage/mypage.html',
  providers: [MyProvider]
})

export class MyPage {

  completedRequests = 0;
  isLoadingSpinner = true;

  constructor(_providerMessages: ProviderMessages, private dataService: MyProvider) {

    //when this page is come upon I would like to get the data from getstuff and getothersstuff.
    // when it loads it should go into these two varaibles to be displayed on the page.

    this.dataService.GetSomeStuff().subscribe(
      (data)=> {
        this.first_data = //getstuff from provider when loaded},
          this.completedRequests++;
      },
      (err) => {
      },
      () => {
        if(this.completedRequests == 2) {
          isLoadingSpinner = false;
        } //page is done loading
      }); //end

    this.dataService.GetSomeOtherStuff().subscribe(
      (data)=> {
        this.second_data = //getotherstuff from provider when loaded
          this.completedRequests++;
      },
      (err) => {
      },
      () => {
        if(this.completedRequests == 2) {
          isLoadingSpinner = false;
        } //page is done loading
      }
    )

  }
}

Template (mypage.html)

<div class="container-of-everything" *ngIf="!isLoadingSpinner">
  <!-- all stuff goes here -->
</div>

<div class="spinner spinning" *ngIf="isLoadingSpinner">
</div>

score 0 · Answer 2 · answered Apr 22 '16 at 09:10

You could simply pass the components this to GetSomeOtherStuff(parentRef: any) and GetSomeStuff(parentRef : any) and then inside your (response) you call get the parent's component refrenece where the boolean is and then set true on completion in ()={ spinner=false; }

Know when http requests are finished from provider in Angular2

2 Answers2