So Angular 2 has reached beta and is making some good progress to release candidate. I thought it was time to start playing with the AngularJS successor. So I decided to create an Ionic 2 application (two frameworks with one stone). It was halfway through the app that I begun to work on a loading indicator and have since then successfully been able to implement it. So I thought it might be worth sharing the implementation of said feature.

Since we have access to RxJS in Angular 2, it would be a waste not to use observables for this!
An observable will be used to let the subscriber know that it can display itself (the loading indicator), but more about this later in the blog post.

The loading service

First we will need to implement a service that contains our reference to the observable.
Nothing special going on here, at the constructor we will instantiate the observable and share it, so it might be consumed by multiple parties.

The toggleLoadingIndicator is our function that will let the observer know that it needs to show or hide the indicator.

As you might have noticed from the comment, this service is a singleton (we only want one instance of this service). We therefore need to provide it at the app configuration level.

import {Observable} from "rxjs/Observable";  
import {Observer} from "rxjs/Observer";  
import 'rxjs/add/operator/share';

 * Singleton service, injected at app level
export class LoadingService {  
    loading$: Observable<String>;
    private _observer: Observer<String>;

    constructor() {
        this.loading$ = new Observable(
            observer => this._observer = observer).share();

    toggleLoadingIndicator(name) {
        if (this._observer) {
  providers: [LoadingService], <!-- PROVIDE THE LOADING SERVICE HERE -->
  template: `
      <ion-nav #content [root]="rootPage"></ion-nav>
  config: {}, //
  prodMode: true

The Loading indicator

The second thing we need to do is implement the actual loading indicator component. This component will subscribe to our loading observable from the 'LoadingService'. We want to do this in the ngOnInit function so we are ready to observe any changes right away.

When a new value is observed, the showOrHideLoadingIndicator function will be called.
Which will depending on the value, set the visibility of the component to visible or hidden.

import {Component, ElementRef, OnInit, OnDestroy} from 'angular2/core';  
import {CORE_DIRECTIVES} from 'angular2/common';  
import {LoadingService} from "../../services/loading-service";

    selector: 'loading-indicator',
    directives: [CORE_DIRECTIVES],
    template: `
       <div [style.visibility]="isLoading ? 'visible': 'hidden'" class="loading-indicator-container">
           <div class="bullet-one"></div>
           <div class="bullet-two"></div>
           <div class="bullet-three"></div>
export class LoadingIndicator implements OnInit, OnDestroy {  
    private isLoading = false;
    private subscription: any;

    //we probably want a reference to ElementRef here to do some DOM manipulations
    constructor (public el: ElementRef, public loadingService: LoadingService) {}

    showOrHideLoadingIndicator(loading) {
        this.isLoading = loading;
        if (this.isLoading) this.playLoadingAnimation();
        //else cancel the animation?

    playLoadingAnimation() {
        //this will be your implementation to start the loading animation

    ngOnInit() {
        this.subscription = this.loadingService.loading$.subscribe(loading =>         this.showOrHideLoadingIndicator(loading));

    ngOnDestroy() {         

Toggling the loading indicator

Now we are all set to start toggling our newly created loading indicator! There are a couple things that need to be done to use it in a component (or page in this example) though. First we need to declare the loadingService in the constructor, so we are able to call it in the rest of our component. The last thing is to include the LoadingIndicator directive in the list of directives since we will be using it in the template of our component.

Now everything is set and we are able to show the indicator by calling toggleLoadingIndicator(true). Easy!

What this in the background does is tell the observer that we have a new value for him. The observer will then let all the subscribers know that there is something new available. The loading indicator component (which is the one that is subscribed) will be told about this and will be able to display itself.

import {Page} from 'ionic-angular';  
import {StatsService} from "../../services/stats-service";  
import {LoadingIndicator} from "../../shared/loading-indicator/loading-indicator";  
import {LoadingService} from "../../services/loading-service";

    templateUrl: 'build/pages/stats-overview-page/stats-overview-page.html',
    providers: [StatsService],
    directives: [LoadingIndicator]
export class StatsOverviewPage {  
    private stats:Array<any> = [];

    constructor(public statsService:StatsService, private loadingService:LoadingService) {}

    onPageLoaded():void {
            .subscribe(response => {
                this.stats = response.json();
<ion-navbar *navbar hideBackButton>  
  <button menuToggle="leftMenu">
    <ion-icon name='menu'></ion-icon>

<ion-content padding class="stats-overview-page">  

  <div class="chart-container">
    <stats-chart [stats]="stats"></stats-chart>


As you can see it it's quite easy to implement a loading indicator mechanism in Angular 2. The power of observables has once again been proven.

Further resources

Using the web animations API

Author image
Tom Buyse
My name is Tom Buyse. I work for Bewire in Belgium. My primary focus is front-end development, which currently mostly involves Angular, Angular 2 and Ionic.
comments powered by Disqus