angular - How to dismiss Loader after data is ready -


in ionic 2 app, have component consumes service makes http fetch data. component calls service , when data available sets , presents it.

it looks following:

export class farmlist implements oninit {    items: object;     constructor(public testservice: testservice, public nav: navcontroller){   }    ngoninit(){      this.getdata()   }    getdata(){      let loading = loading.create({       content: 'please wait..',       spinner: 'crescent'     })      this.nav.present(loading)      this.testservice.fetchdata().then(data => this.items = data)    } ...  } 

while component fetches data asynchronously, trying have loader spinning , once data available, want loader disappear.

however, current code spinner keeps spinning after data available , displayed can seen screenshot:

enter image description here

getdata() method makes service call. how can fix this? correct way implement loader?

you can find working plunker here.

like can see in code of plunker, make few changes in order make code work properly:

  export class farmlist implements oninit {    items: object;    // define loading var here, can access later when information ready   loading : any;    constructor(public testservice: testservice, public nav: navcontroller){   }    // instead of 'ngoninit', use 'ionviewwillenter'   ionviewwillenter(){     this.getdata()   }    getdata(){      this.loading = loading.create({       content: 'please wait..',       spinner: 'crescent'     })      this.nav.present(this.loading)      this.testservice.fetchdata().then(data => {                                         this.items = data;                                         // after data, hide loading                                        this.hideloading()});    }    // 've added method can grab loading var , use    // hide loading component.   private hideloading(){     this.loading.dismiss();   } ...  } 

================================

update:

as of release of ionic 2.0.0-beta.8 (2016-06-06) changelog:

onpagewillenter renamed ionviewwillenter


Comments

Popular posts from this blog

Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12:test (default-test) on project.Error occurred in starting fork -

windows - Debug iNetMgr.exe unhandle exception System.Management.Automation.CmdletInvocationException -

configurationsection - activeMq-5.13.3 setup configurations for wildfly 10.0.0 -