Pages

How to implement Loading Indicator in ionic 2 and ionic 3.

IonicFramework Provdes us with an preBuilt components called as LoadingController which allows to create an overlay on top of the page, that can be used to indicate the user an activity is running in the background. Since LoadingController creates an overlay and appears on top of the app's content, it  blocks the user interaction untill the process is complete.

Now lets look at how to implement loadingcontroller in our ionic project. First as usual we will start by creating an page, lets name it as Dashboard.


ionic generate page dashboard

This will create a dashboard folder in src/pages folder in your projects root directory.which contains four files.

1. dashboard.html
2dashboard.module.ts
3. dashboard.ts
4. idashboard.scss

If dashboard.module.ts is not created by Ionic CLI, you should import DashboardPage into app.module.ts as below.


import { DashboardPage } from '../pages/dashboard/dashboard';

The above line tell's the app that a page named DashboardPage is available at the particular location. Now Check to see if your project is running properly, without any errors.

Now since, the page is created and working fine, let's go to the coding part.



Copy and Paste the below ts code to your Components .ts file.

import { LoadingController } from 'ionic-angular';

after completing the above step, inject  LoadingController in to your pages constructor, in my case in dashboard.ts file as shown below.



  constructor(...., public loadingCtrl: LoadingController) {
    ....
  }

and Now let's modify our dashboard.html to include the below code.
 

Copy and Paste the below html code to your Components .html file.


  <ion-content>
  <div style="margin-top: 50%;">
    <button ion-button full color="secondary" (click)="presentLoadingDefault()">Please Wait...</button>
    <button ion-button full color="danger" (click)="presentLoadingText()">Loader Without Spinner</button>
  </div>
</ion-content>




Next let's look at the functionality part shall we,

Copy and Paste the below ts code to your Components .ts file.

   presentLoadingDefault() {
    let loading = this.loadingCtrl.create({
      content: 'Please wait...'
    });
  
    loading.present();
  
    setTimeout(() => {
      loading.dismiss();
    }, 2000);
  }
  
  
  presentLoadingText() {
    let loading = this.loadingCtrl.create({
      spinner: 'hide',
      content: 'Loading Please Wait...'
    });
  
    loading.present();
  
    setTimeout(() => {
      loading.dismiss();
    }, 200000);
  }

loader can be dismissed by calling  loading.dismiss() after our process is done, to resume user interaction with the app. 
In second method that we have implemented above we have set spinner to hide, this hides the spinner and shows only the text.

That's it,  feel free to comment below if you have any queries or doubt's about the regarding above code implementation.

vinay kumar

Founder of Gowriter.Blogspot.com, Tech Enthusiast, Normal type of Person with passion toward's work.

No comments: