How to dismiss Loader after data is ready
<p>In my <code>Ionic 2</code> app, I have a component that consumes a service which makes an http GET to fetch some data. My component then calls this service and when data is available it sets and presents it. </p>

<p><strong>It looks like following</strong>:</p>

<pre><code>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 =&gt; this.items = data)

  }
...

}
</code></pre>

<p>While my component fetches the data asynchronously, I am trying to have a <code>loader</code> spinning and once the data is available, I want the <code>loader</code> to disappear.</p>

<p>However, with my current code the spinner keeps spinning even after data is available and displayed as can be seen the screenshot:</p>

<p><a href="https://i.stack.imgur.com/EJBJ4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EJBJ4.png" alt="enter image description here"></a> </p>

<p><code>getData()</code> is the method that makes service call.
<strong><em>How can I fix this? Is it the correct way to implement loader?</em></strong></p>