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...',
  });

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