How to reject the loader after the data is ready

Question

In my Ionic 2 application, I have a component that uses a service that does an HTTP GET to retrieve some data. Then my component calls this service, and when the data is available, it installs and presents it.

It looks like this :

 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 my component is retrieving data asynchronously, I try to make the loader rotate, and as soon as the data is available, I want the loader disappear.

However, with my current code, the spinner continues to spin even after the data is available and displayed, as you can see the screenshot:

getData() is a method that invokes a service call. How can i fix this? Is it correct to implement the bootloader?

Answer 1

Here you can find a working plunker .

As you can see in the code of this plunger, I would make a few changes so that your code works correctly:

  export class FarmList implements OnInit { items: Object; // Define the loading var here, so we can access later when the information is ready loading : any; constructor(public testService: TestService, public nav: NavController){ } // Instead of 'ngOnInit', I would 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 we get the data, we hide the loading this.hideLoading()}); } // I 've added this method so we can grab the loading var and use it // to hide the loading component. private hideLoading(){ this.loading.dismiss(); } ... } 

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

UPDATE:

Starting with the release of Ionic 2.0.0-beta.8 (2016-06-06) changelog :

onPageWillEnter been renamed ionViewWillEnter