title: How to dismiss Loader after data is ready
body: <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>