How to update message of LoadingController in ionic4?

Ionic Framework
1

The old ionc3 LoadingController returned a loader object which had a method setContent() which could be used to update the loading message as things progressed:

Ionic 3:

this.loader = this.loadingCtrl.create({
    content: 'Please wait...'
});

...

this.loader.setContent('bla...');

How can this be done in ionic4+? There does not seem to be a setContent() method of the returned object.

Thanks.

1 Like
2

Hello

I have exactly the same problem and I searched for a while. Did you find a solution? Or have you workaround?

Thanks for your answer.

3

for now, I am updating the html directly with jquery:

$(‘.loading-content’).html(text);

That’s very ugly however. I wish the component would support it.

4

Yes it’s an ugly way but as workaround it works.
I hope that the ionic team will improve this component.

Tanks for your answer.

5

Might this be one of those FTSE problems? IOW, how about moving the dynamic capability into a custom component?

let loader = this.loadingCtrl.create({
  content: '<my-loader-messager [message]="msg"></my-loader-messager>'
});

Changes to any properties referenced by the internal component (such as msg in this example) should be reflected in the loading component (although perhaps manual change detection triggering might be needed).

1 Like
6

Keep the reference after creating

load: HTMLIonLoadingElement = null;

this.loadingCtrl.create({
      message: title,
      spinner: 'dots'
    }).then( (load: HTMLIonLoadingElement) => {
      this.load = load;
      this.load.present().then(() => {
        if (!this.isLoading) {
           this.load.dismiss().then();
        }
      });
    });

Then update

this.load.message = "hello progress (33%)";
2 Likes
7

I recommend against doing this, because it facilitates reuse and double-disposal bugs.

8

It probably has to do with:

9

Great! This works for me :laughing: 3Q

10

Any solution that how to show html content in LoadingController?

11

this.loader.message = 'your text ’

1 Like