This is meant to be a super-simple Angualr 2 component, used in tandem with ngSwitch to block DOM elements while waiting for async data.

Pull loading-indicator.ts into your project, generally in a widely accessible place, where it can be referenced by other classes. Pull loading-indicator.scss into your Sass directory.

In your target class, reference the two classes in loading-indicator.ts. One is a directive, while the other is a base class that your component should extend:

import {Component, OnInit} from 'angular/core';
import {DataService} from '../../data/data.service';
import {LoadingPage} from 'path/to/loading-indicator';

@Component({
	selector: 'some-component',
    templateUrl: 'some/page.html'
})
export class LoginPage extends LoadingPage {
	public asyncData;

    constructor(private _data: DataService) {
        super(true); // sets loading to true
    }

    ngOnInit() {
        this._data.getData().then(res => {
            this.asyncData = res;
            this.ready(); // sets loading to false
        );
    }
}

In the template where you'll use this class, add an *ngSwitch to toggle the active view:

<ion-content class="login">
	<div [ngSwitch]="loading">
		<div *ngSwitchCase="false">
			<ul>
				<div *ngFor='#item in asyncData.items'>
					<li>{{item}}</li>
				</div>
			</ul>
		</div>
		<div *ngSwitchCase="true">
			<loading-indicator></loading-indicator>
		</div>
	</div>
</ion-content>

In this case, the ngSwitch blocks the ngFor repeater from loading into the DOM; had it been loaded, Angular would have thrown an error, as it wouldn't be able to find property items of undefined.

The base class comes with two methods, a public property, and a constructor.

A property that will be set by the various internal methods, and will ultimately set the value of the ngSwitch in your component's template.

The class constructor method, which apply an initial parameter value to the loading property.

A method that sets loading to false, thus activating the part of the template that had been blocked.

A method that sets loading to true, thus re-blocking the part of the template that you don't want rendered.