Table of Contents

URL: https://www.progressiverobot.com/ionic-loading-controller-ionic/

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.