Ionic-framework: Change Content of Loading Component

Created on 9 Apr 2016 · 16Comments · Source: ionic-team/ionic-framework

Using the new Loading component in Ionic2 🙏 (thank you!) and trying to figure out the recommended way to change the content of the loading message (for loading messages that keep the user updated as to what is happening, eg Connecting to Server, Downloading Data, Preparing, etc). Is the recommended way to dismiss and recreate? Seems like it could be more work than needed. Let me know if I'm missing something obvious.

HACK ALERT:
If you really want to do this in an unsupported way you can do this
this.existingLoader.data.content = str;

If you are open to having a content setter on the loading component that does this I'd gladly setup a pull request.

Source

kentongray

👍1

Most helpful comment

I can confirm this too. Here is a temporary fix.
import:
import { NgZone } from '@angular/core';

Add NgZone to the constructor:
constructor(public ngZone: NgZone){}

Use NgZone to trigger the change detection. Something like this:

let loader = this.loadingCtrl.create({
    content: 'Some static value'
});

loader.present();

this.function().subscribe((data: any) => {
    this.ngZone.run(() => {
        loader.setContent('Some dynamic value ' + data.value);
    });
});

loopezz on 31 Mar 2017

👍10 🎉2

All 16 comments

Hey, you can just grab it from your DOM and update it's innerHTML. The loader content class is .loading-content

thiphariel on 11 Apr 2016

👎3

Hey @kentongray, thanks for the issue! I think adding a setContent function would be a good addition. It should be similar to alert's functions: https://github.com/driftyco/ionic/blob/2.0/ionic/components/alert/alert.ts#L158-L170

If you want to create a PR that would be helpful, just let me know!

brandyscarney on 11 Apr 2016

👍5

jmarginier on 15 Jul 2016

Thanks to @stonelasley for PR https://github.com/driftyco/ionic/pull/7697! This will be in the beta 12 release.

brandyscarney on 17 Aug 2016

🎉1

setContent is not working when called inside a Promise chain? Maybe a problem with scopes (change detection)?

meeximum on 6 Dec 2016

👍1

I confirm.. It's not working inside a Promise.

vptcnt on 15 Feb 2017

It's not really working for me together with Transfer (from ionic-native). I want to do a file upload and when the transfer object emits a progress event, I want to update the contents with how much percentage of the upload is done.

maxpaj on 22 Mar 2017

👍2

I can confirm this too. Here is a temporary fix.
import:
import { NgZone } from '@angular/core';

Add NgZone to the constructor:
constructor(public ngZone: NgZone){}

Use NgZone to trigger the change detection. Something like this:

let loader = this.loadingCtrl.create({
    content: 'Some static value'
});

loader.present();

this.function().subscribe((data: any) => {
    this.ngZone.run(() => {
        loader.setContent('Some dynamic value ' + data.value);
    });
});

loopezz on 31 Mar 2017

👍10 🎉2

Still an issue as of Ionic 3 - can this issue be reopened?

cocowalla on 17 Apr 2017

👍7

Ross-Rawlins on 24 Apr 2017

👍2 👎1

Is it possible to have a content URL? that is to say having a loader with the same content in multiple places and not having to repeat the code?

DarthFarzad on 9 May 2017

@maxpaj Can confirm that the 'hack' works while using the Transfer plugin.

loading: any;

constructor(loadingCtrl: LoadingController, myService: MyService) {   }

transferFile( ) {
   //retrieve some file 
   let file = new File();
   this.loading = this.loadingCtrl.create({content: "0%"});
   this.myService.onProgress(this.loading);
   this.myService.transferFile(file);
}

And then just 'hack' in your service:

onProgress(loader: any) {
   this.fileTransfer.onProgress(event => {
        loader.data.content = (Math.round((event.loaded / event.total) * 100))+"%";
   });
}

ivarreukers on 4 Aug 2017

👍5

Hello, I would like to ask you to do a countdown Well, I found that this loadingCtrl content will not be updated in time, for example, I do a 30 second countdown he will remain in 30 seconds, you who told me how to achieve it

qwerqwermhc on 3 Jan 2018

this solution works partially -> I need to touch screen to see updated value in loader content (android). Anyone has this issue?

arekkoperek on 4 Jan 2018

@arekkoperek Yes, I have the same behaviour on iOS and Android.

joschi77 on 6 May 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.