Ionic 8 LoadingController and HTML content

Ionic Framework
1

Using @ionic/angular@8.4.0 here’s the code-snippet from the docs.

import { Component } from '@angular/core';

import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
})
export class ExampleComponent {
  constructor(private loadingCtrl: LoadingController) {}

  async showLoading() {
    const loading = await this.loadingCtrl.create({
      message: 'Dismissing after 3 seconds...',
      duration: 3000,
    });

    loading.present();
  }
}

How do you allow for HTML content in the message text? In older versions of Ionic this was as simple as making using an HTML string in the content field of the LoadingOptions object passed to this.loadingCtrl.create(opts), but the content field is not there anymore in Ionic 8 and passing HTML content in the message field just renders the HTML tags as plain text. I’ve also tried using an IonicSafeString wrapper around the message, but then it just spits out ‘undefined’ for the loader message. How are you supposed to do this in Ionic 8?

2

IonicSafeString is the proper way but you need to set innerHTMLTemplatesEnabled: true in your Ionic config. I tested this in Vue and it worked with HTML.

const loading = await loadingController.create({
  message: new IonicSafeString('<i>Yolo</i>'),
  duration: 3000,
});

IonicSafeString should not be used if innerHTMLTemplatesEnabled is set to false. - (source)

And

innerHTMLTemplatesEnabled must be set to true in the Ionic config before custom HTML can be used. - (source)

1 Like
3

Thanks, that did the trick! Actually you apparently don’t even need IonincSafeString as long as you set innerHTMLTemplatesEnabled: true

1 Like