How to show a loader/GIF/text on DOM till data from JSON API is not fetched in Ionic 2?

Question

I want to show a loader or a GIF or a text on my screen before the data is loaded from my JSON API. Please see my code below, in the most simpler manner listproducts.ts is fetching the data using listproduct.service.ts

Below is my code for listproduct.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, HttpModule ,Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class ListproductService{
    private _url:string = "http://funiks.com/qbook/api/productmasterjson.php";
    constructor(private _http : Http){}

    listProduct(){
        var headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        return this._http.post(this._url,{headers:headers})
               .map((response:Response) => response.json());
    }
}

And listproduct.ts

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ListproductService } from './listproduct.service';
import { DeleteProductService } from './deleteProduct.service';
import { ProductservicemasterPage } from '../productservicemaster/productservicemaster';
import { Subscription } from 'rxjs';


@IonicPage()
@Component({
  selector: 'page-listproduct',
  templateUrl: 'listproduct.html',
  providers : [ ListproductService,DeleteProductService ],
})
export class ListproductPage implements OnInit{
  public list = [];
  constructor(private _listProduct : ListproductService,private _deleteProduct : DeleteProductService,
              public navCtrl: NavController,public navParams: NavParams) {}

  ngOnInit() {
     this._listProduct.listProduct().subscribe(data => {
       this.list = data;
      console.log(data[0].NAME);
      });
  }
}

How can I achieve this?

Answer 1

If I understand your question you could have a loading spinner where the data will show, wrap your code in a try/catch/finally block and replace the data with the spinner till the data is fetched.

Also have a boolean value for the spinner and replace the spinner with the data.

showSpinner: boolean = true;

HTML

<div class="data-wrapper">
   <div *ngIf="list">
      <div *ngFor="let item of list">
         {{ item.NAME }}
      </dvi>
   </div>
   <div *ngIf="showSpinner">
      <app-spinner></app-spinner> <!-- your spinner goes here -->
   </div>
</div>

Typescript

try {
  this.http.get<T>(this.apiUrl).subscribe(data=> {
    this.list = data;
  });

}
catch (e) {
  console.log(e);
}
finally {
  this.showSpinner = false; //You now have the response, so hide the spinner.
}

Answer 2

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ListproductService } from './listproduct.service';
import { DeleteProductService } from './deleteProduct.service';
import { ProductservicemasterPage } from '../productservicemaster/productservicemaster';
import { Subscription } from 'rxjs';


@IonicPage()
@Component({
  selector: 'page-listproduct',
  templateUrl: 'listproduct.html',
  providers : [ ListproductService,DeleteProductService ],
})
export class ListproductPage implements OnInit{
  public list = [];
  loading:any;
  constructor(private _listProduct : ListproductService,private _deleteProduct : DeleteProductService,
              public navCtrl: NavController,public navParams: NavParams, public loadingCtrl: LoadingController) {
   this.loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });
    }

  ngOnInit() {
     this.loading.present();
     this._listProduct.listProduct().subscribe(data => {
       this.list = data;
      console.log(data[0].NAME);
      this.loading.dismiss();
      });
  }
}