Show loading on load http.get

Hi, as the title…

how do I show loading / spinner and close it after my http.get request is complete?

I have search and found this

but it will only show and hide the loading/spinner with a setTimeout().


Can try, something like this:

let loading = Loading.create({content:'My message'});
nav.present(loading); //nav instance of NavController


Here’s a more complete example,

import {Page, Loading, NavController} from 'ionic-angular';
import {DataService} from '../../providers/data-service/data-service';

  templateUrl: 'build/pages/home/home.html',
  providers: [DataService]
export class HomePage {
  public people;
  public loading = Loading.create();
    public data: DataService,
    public nav: NavController
  ) {
      res => this.people = res.results,
      err => console.warn(err),
      () => {



Thank you @mhartington @mauricionarcizo
This solution improve my UX!

1 Like

I just tried the Loading component, and I´m getting

browser_adapter.ts:73 TypeError: Cannot read property 'nativeElement' of undefined
    at new LoadingMdPopOut (http://localhost:8100/build/js/app.bundle.js:48166:40)
    at Function.Transition.createTransition (http://localhost:8100/build/js/app.bundle.js:68127:16)
    at http://localhost:8100/build/js/app.bundle.js:50623:58
    at ZoneDelegate.invoke (http://localhost:8100/build/js/angular2-polyfills.js:390:29)
    at (http://localhost:8100/build/js/angular2-polyfills.js:283:44)
    at NgZoneImpl.runOuter (http://localhost:8100/build/js/app.bundle.js:29001:71)
    at NgZone.runOutsideAngular (http://localhost:8100/build/js/app.bundle.js:28919:80)
    at Portal.NavController._beforeTrans (http://localhost:8100/build/js/app.bundle.js:50613:20)
    at Portal.NavController._postRender (http://localhost:8100/build/js/app.bundle.js:50595:14)
    at Portal.NavController._render (http://localhost:8100/build/js/app.bundle.js:50511:18)
  -------------   Elapsed: 74 ms; At: Tue Apr 26 2016 16:58:57 GMT-0300 (ART)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:8100/build/js/angular2-polyfills.js:1413:23)```

I trying do this with Beta.11 and its not working, can you help me?

Thank you!


there are a few changes in beta 11 – see changelog


import {Loading } from 'ionic-angular';


import { LoadingController } from 'ionic-angular';

add it to your constructor:

public loadingController: LoadingController

and call it:

let loader = this.loadingController.create({
      content: "your message"

Hi, thanks it works when using in Component directly. But if I want to intercept in service Http - it shows: Cannot read property ‘create’ of undefined. So it is stopping on let loader = this.loadingController.create({
content: “your message”

I am extending Http with my custom HttpService, where in Appmodule I also implement:

providers: [MessagesData,UserData,Storage,CustomersData,{
provide: HttpService,
useFactory: (backend: XHRBackend, options: RequestOptions) => {
return new HttpService(backend, options);
deps: [XHRBackend, RequestOptions]

Does anyone have Idea, why it is not creating Loading?

1 Like

Services should not be interacting with the view layer. Don’t try to interact with a LoadingController from a service. I also think it’s better to wrap Http using composition instead of inheritance.

1 Like

Ok I understand. Thanks. So what would be recommended way to “not to repeat” every time LoaderController creation code? But to attach to every http request?

That’s a pretty open-ended question that’s hard to answer in a general way. Sometimes I want it to be done as the page is becoming active, sometimes I want it as part of an explicit refresh action, sometimes I just don’t care to present it to the user and just let network activity happen in the background. There are a lot of different situations in which you might want to present a loading spinner, and it probably won’t always be the same in all your pages, which is another reason to get it out of the service.

@fathermonkey: if you dismiss a loading object, it’s destroyed. Presenting it back will result in an error (the error you mentioned earlier).
It’s better to create the loading object each time you need it :
Instead of

Use this.myLoadingPresent();


myLoadingPresent() {
this.loading = this.loadingController.create({
content: ‘Loading… Please wait.’

1 Like

Hello there ;

This is my component.ts
import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import {Deneme} from ‘…/…/providers/deneme’;
import { Http,Response } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import { LoadingController } from ‘ionic-angular’;

Generated class for the Dic page.

See for more info on
Ionic pages and navigation.

templateUrl: ‘dic.html’,

export class DicPage {


constructor(public navCtrl: NavController, public navParams: NavParams,public den:Deneme,public http:Http,public load:LoadingController) {


let loaddd = this.load.create({
content: ‘Please wait…’

this.den.loading().subscribe(data => {this.veri=data},err => console.log(err),()=>{loaddd.dismiss()});

I see veri variable is null at console.However if i do this

this.den.loading().subscribe(data => {console.log(data)},err => console.log(err),()=>{loaddd.dismiss()});

I can see my Json data at console !!!
I dont really understand Can you Help me

Thank you in Advance

Try console.log(JSON.stringify(this.veri));

thanks a a lot my friend for ur contrubiton

Hi, I am very much new to ionic2 can you please explain what is this
…/…/providers/data-service/data-service? what type of providers you use means exactly what we have to place in providers folder and how you get this data-service? Or can you share your full project with all this folders.

thanks @fishgrind this works for me :+1: :slight_smile:

1 Like