Know when http requests are finished from provider in Angular2

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

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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… Read more »

Jason
Guest

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; }