HTML tags are not working in Ionic 5 Alert text

Question

I have migrated the following code from Ionic 3 to Ionic 5

   const alert = await this.alertCtrl.create({
      subHeader: "About" + " <b>" + this.user.name + "</b>",
      message: "Test Messgae",
      buttons: [
        {
          text: 'Close',
          role: 'cancel',
          handler: () => {
          }
        }
      ]
    });
    await alert.present();

In Ionic 3 the user name is displayed in Bold font but in Ionic 5 the HTML tags are not working and < b > tags are displayed as text. Please suggest how can I style text in alert in IONIC 5.

Loutitia

I have also noticed this issue recently updating to Ionic 7. Did you find any way to embed HTML elements in the message or subheader? I found it really useful for embedding images in the alert as well as custom CSS for separate parts within the message. – Ostend

Answer 1

A word of caution

The html tags appear since Ionic sanitizes the passed string to avoid unsafe html injections. Unsafe html can be used by an attacker to coordinate XSS attacks.

Solutions

In case you need a simple customization of the html I'd greatly prefer Tomislav's answer to avoid any security risks.

If you need a bit of simple html inside the alert box you can use message: new IonicSafeString("foo<br>bar"). If you choose this option be sure to sanitize the html by yourself to make sure the string you pass is safe (see more on Bypassing the sanitizer on a case-by-case basis).

If you need to display real html you probably better of using a modal instead of an alert. Alerts are intended to display simple content.

Updates

Starting on Ionic 7 you need to enable innerHTMLTemplatesEnabled: true on your config for IonicSafeString to work. See the breaking changes bug report.

Offset

Thanks, the setting of property in IonicModule.forRoot method was the tricky part. It helped! – Bryonbryony

Answer 2

The following worked for me because I am using IONIC 7.

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),
        AppRoutingModule,
        HttpClientModule
],

Enabling the inner HTML templates. Might be needed because your HTML is being rendered as plain string/text. With this enabled all HTML tags I used was rendered correctly

Hope this helps

Communistic

This has solved it for me – Stylize

Answer 3

subHeader can be bold using a custom CSS class. In this example that is alertCustomClass.

home.page.ts

 async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'About ' + this.test,
      subHeader: this.test,
      message: 'About ' + '<strong>' + this.test + '</strong>',
      cssClass: 'alertCustomClass',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

global.scss

.alertCustomClass {
      .alert-sub-title {
          font-weight: bold;
      }
 }

---

Also, you can bold message using <strong> like this:

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      header: 'Confirm!',
      message: 'About ' + '<strong>' + this.user.name + '</strong>',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

header will be bold (font-weight:500;) as default.

...
   header: 'About ' + this.user.name,
   message: ...,
   buttons: ,,,.
...

Publea

Workes for message but not for subHeader. – Loutitia

@TapasMukherjee Can you use header instead of subHeader? – Publea

@TapasMukherjee I've added an additional example for styling subHeader. – Publea

thanks for putting the effort. I am aware of the custom CSS class. The problem is, it will make the entire text bold. I am not sure why this is changed in Ionic 5 – Loutitia