Loading Image

How to Create a Custom Loading Component in Ionic 2



·

Ionic 2 is still being developed, so naturally there are a few components missing that people are keen to get their hands on. One of those in particular is a loading service (aka a busy or waiting service). Although in general it is a bad idea to block a users interaction with the application, things should be done in the background allowing the user to continue using the application, sometimes it is necessary to force the user to wait before allowing interactions to continue.

A loading service is on the roadmap for Ionic 2, but it has been heavily requested and has just recently been bumped up in priority (it will now likely be included in the next release). Until then though, I’m going to show you how you can implement your own custom loading service in Ionic 2 – I’m sure Ionic’s final solution will be better, but in the mean time feel free to use this.

This is going to be a super quick tutorial, and much less in depth than my others because I’m writing this in response to a few requests for the custom loading component I created:

Usually I take time to explain things step by step, but this time it’s pretty much just going to be a code dump into this post.

Although the loading service I created is quite a bit different, the component was originally inspired by a similar component forum user Luchillo created. His solution is great, and is more configurable than this solution, but I just wanted a simple loading service that I could show or hide from anywhere and it would block interaction with the screen. Some of the CSS used in this solution is borrowed from there, so credit to Luchillo for that.

Before We Get Started

Before you go through this tutorial, you should have at least a basic understanding of Ionic 2 concepts. You must also already have Ionic 2 installed on your machine.

If you’re not familiar with Ionic 2 already, I’d recommend reading my Ionic 2 Beginners Guide first to get up and running and understand the basic concepts. If you want a much more detailed guide for learning Ionic 2, then take a look at Building Mobile Apps with Ionic 2.

BONUS CONTENT: Download the source code for this application by entering your email address below:

1. Generate a New Ionic 2 Application

Run the following command:

ionic start ionic2-loading blank --v2

2. Create the Loading Component

Run the following command:

ionic g component LoadingModal

Modify loading-modal.js to reflect the following:

import {Component} from 'angular2/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
  selector: 'loading-modal',
  templateUrl: 'build/components/loading-modal/loading-modal.html',
  directives: [IONIC_DIRECTIVES] // makes all Ionic directives available to your component
})
export class LoadingModal {

  constructor() {
    this.isBusy = false;
  }

  show(){
  	this.isBusy = true;
  }

  hide(){
  	this.isBusy = false;
  }

}

Modify loading-modal.html to reflect the following:

<div class="container" [ngClass]="{'busy': isBusy}">
    <div class="backdrop"></div>
    <ion-spinner></ion-spinner>
</div>

Create a loading-modal.scss file in the same directory:

loading-modal .container {

  z-index: -1;
  transition: z-index 0.2s step-end;

  width: 100%;
  height: 100%;
  position: absolute;

  display: flex;
  justify-content: center;
  align-items: center;

  &.busy {
    z-index: 9999;
    transition: z-index 0.2s step-start;
    .backdrop {
      opacity: 0.3;
    }
  }

  .backdrop {
    opacity: 0.01;
    transition: opacity 0.2s;
  }

  ion-spinner {
    width: 60px;
    height: 60px;
  }

}

Add the following imports to app.core.scss

@import "../pages/home/home";
@import "../components/loading-modal/loading-modal";

3. Add the Component to the Root Component

Modify app.js to import the component, and add it to the template and directives declaration:

import {App, Platform} from 'ionic-angular';
import {HomePage} from './pages/home/home';
import {LoadingModal} from './components/loading-modal/loading-modal';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav><loading-modal id="loading"></loading-modal>',
  directives: [LoadingModal],
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = HomePage;

    platform.ready().then(() => {

    });
  }
}

4. Trigger the Loading Service

To use the loading service, all you have to do is grab a reference to it using getComponent and then call the hide and show methods.

Use the component in any class as follows:

import {IonicApp, Page} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

    static get parameters(){
        return [[IonicApp]];
    }

    constructor(app){
        this.loading = app.getComponent('loading');
    }

    showLoader(){

        this.loading.show();

        setTimeout(() => {
            this.loading.hide();
        }, 2000);
    }

}

Summary

Although this is going to be made redundant pretty soon, I think it’s a pretty simple and clean approach that can be used easily throughout your application. My apologies for the brevity of this post, I wasn’t expecting to be writing it!

What to watch next...

  • Zaid Ibnu Awwal

    got error on this

    constructor(app){

    this.loading = app.getComponent(‘loading’);

    }

    • Bond

      Should be “loading-modal”

  • Nice guide. Works like a charm 🙂
    Thanks !.

  • Vinh Vu

    I have error :

    browser_adapter.ts:73 Error: Template parse errors:

    Unexpected character “EOF” (”

    </div

  • I am getting error: “TypeError: this.loading is undefined” I have tried with both app.getComponent(‘loading’) and
    app.getComponent(‘loading-modal’)

  • Hello! How to use now in the beta 7? the app.getComponent is deprecate… 🙁

  • Malkiat Singh

    Its not working with BETA -7 realse

  • Jarratt

    Would be great if you can update it for BETA 7/8, I cant seem to get the loader to pull through to the page

    @ViewChild(‘loader’) loader: LoadingModal;
    ngAfterViewInit() {
    console.log(this.loader); // always null
    //this.loader.show();
    }

  • Ventis

    I guess there is quite some changes to ionic from beta 8 through the latest 10. This tutorial does not seem to work with them I have “Cannot read property ‘show’ of undefined” as the exception with this.loading = app.getComponent(“loading-modal”) and this.loading = app.getComponent(“loadingl”). Any ideas

  • Áron Barócsi

    Im not sure to understand, why not use Angular2 DI for loading component? And why is this needed: static get parameters(){
    return [[IonicApp]];
    }

  • Sumedha Prithyani

    hi i want to make custom web page when there is no internet connection in ionic android webview. I dont wanna show the default error that is “The web page is not available” also i want to hide the url at error time plz can any one help me

  • mash kaponde

    Can this work with ionic 2 rc? I am new to ionic so I am basically learning as I need new things for my app. Right now i am trying to block user interaction at app start up to give time for the app to fetch data from a web api. Can i still follow your tutorial and in will work? I am using ionic 2 rc. I will appreciate any clarifications

    • It technically works but you have to slightly change the syntax, and fix css as I tried it and it didn’t function as expected. But the general concept is there and you can follow.

      LoadingController is another one that you can use from ionic 2, but turns out didn’t work for me if you present it on pushed page. It’s z-index is mess.
      Also if you like, might wanna take a look at this https://gist.github.com/Luchillo/fc3d01f29580d5067541, another solution, but also I tried it didn’t work but general concept is the same and the syntax is more correct, so you can compare.

      • mash kaponde

        Thanks @haxpor:disqus, i will try that out.

  • Gaurav Madaan

    Can you please share the latest on this?

  • bluebell27

    compiler error , parameter ‘app’ cannot be resolved in constructor for HomePage. From where do we get this parameter , please explain . I am using Ionic version 2.1.13