Implementing a Loading Indicator in Ionic 2

Ionic 2's LoadingController allows to create an overlay indicator that appears while the app is doing something in the background. It's a great way to indicate to the user that the app is working. Here's how to implement it. First you import LoadingController from ionic-angular:

import { LoadingController } from 'ionic-angular';

Then you inject LoadingController in your component’s class constructor:

constructor(public loading: LoadingController) {}

And now let’s create a loading controller in the ionViewLoaded() lifecycle hook available in Ionic 2, for when the page loads. Notice how the Loading Controller returns a promise, so then() can be called on it:

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });

  loader.present().then(() => {
    this.someService.getLatestEntries()
      .subscribe(res => {
        this.latestEntries = res;
      });
    loader.dismiss();
  });
}

The dismiss() method on the loader makes sure that we remove it when the app is ready.

✖ Clear

🕵 Search Results

🔎 Searching...