angular - Know when http requests are finished from provider in Angular2 -
i created provider this:
import {injectable, provider, inject} 'angular2/core'; import {http, response, headers} 'angular2/http'; import {platform, storage, sqlstorage,localstorage} "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 can 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 can used }, (err) => { }, () => { } ); //end of subscribe }
i have page. inside of page when user comes call provider getstuff() , getotherstuff() functions data. while data loading little spinner should show, when requests finish page should know this.
@page({ templateurl: 'build/pages/mypage/mypage.html', providers: [myprovider] }) export class mypage { isloadingspinner = false; constructor(_providermessages: providermessages) { //when page come upon data getstuff , getothersstuff. // when loads should go these 2 varaibles displayed on page. isloadingspinner = true; //page laoding show spinner this.first_data = //getstuff provider when loaded this.second_data = //getotherstuff provider when loaded isloadingspinner = false; //page done loading } } }
essentially page display data when loaded, when still waiting response should able capture state show spinner
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 page come upon data getstuff , getothersstuff. // when loads should go these 2 varaibles displayed on page. this.dataservice.getsomestuff().subscribe( (data)=> { this.first_data = //getstuff provider when loaded}, this.completedrequests++; }, (err) => { }, () => { if(this.completedrequests == 2) { isloadingspinner = false; } //page done loading }); //end this.dataservice.getsomeotherstuff().subscribe( (data)=> { this.second_data = //getotherstuff provider when loaded this.completedrequests++; }, (err) => { }, () => { if(this.completedrequests == 2) { isloadingspinner = false; } //page done loading } ) } }
template (mypage.html)
<div class="container-of-everything" *ngif="!isloadingspinner"> <!-- stuff goes here --> </div> <div class="spinner spinning" *ngif="isloadingspinner"> </div>
Comments
Post a Comment