How to get line breaks in message using AlertController in Ionic v7

Hi, previous to my upgrade to Ionic 7 I was able to use <br/> (I would replace all \r\n with <br/>) to get line breaks in my messages.

However, now the
shows up in the message

image

My string looks like

My code is

 const alert = await this.alertCtrl.create({
      header: title,
      message: messageAsString,
      buttons: [ok],
      backdropDismiss: false,
    });

It is in a helper method I call from everywhere.

I tried just using \r\n (which is what I have been replacing with
) but this does not work either.

Does anyone know how we can still have multiple lines using AlertController?

Thanks in advance

Found my answer here

See comment for ionic 7. where need to use

IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),

Sorry, I added import to my app.module.ts file but I can’t show break line in my alert.

My app.module.ts file

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    IonicModule.forRoot({ innerHTMLTemplatesEnabled: true })
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

This is my project configuration:

Ionic:

   Ionic CLI                     : 7.1.1 (C:\tools\nvm\v16.14.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 7.5.2
   @angular-devkit/build-angular : 16.2.8
   @angular-devkit/schematics    : 16.2.8
   @angular/cli                  : 16.2.8
   @ionic/angular-toolkit        : 9.0.0

Cordova:

   Cordova CLI       : 12.0.0 (cordova-lib@12.0.1)
   Cordova Platforms : android 11.0.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 
7 other plugins)

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.3) : 1.7.2

System:

   Android SDK Tools : 26.1.1 (C:\Users\myuser\AppData\Local\Android\Sdk)
   NodeJS            : v16.14.0 (C:\Program Files\nodejs\node.exe)
   npm               : 8.3.1
   OS                : Windows 10

This is my code:

message = "Il... vendita di quest’ultimo. \n<br><br>[(Prezzo..."
    this.alert.create({
      header: _title,
      subHeader: _subHeader,
      message: _message,
      buttons: buttons,
      cssClass: customCss
    }).then(res => {
      res.present();
    });

image

@lsantaniello that did work for me, though I just checked and I am using \n rather than <br> (maybe see if that works)?

I’m retried but it not works :frowning: