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

Ionic Framework
1

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

image
image1290×79 11.3 KB

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

2

Found my answer here

See comment for ionic 7. where need to use

IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),
3

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

4

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

5

I’m retried but it not works :frowning: