Toast has been created with message that should be recognised as HTML, but is shown as undefined even though the ionic config IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),
has been correctly set.
Current behaviour is:
I have tried v7, v8, both raising same issues (it says undefined instead, even if I use safestring!)
I saw similar issues that have been closed, and I could still not resolve this, even with the ion config being set so I am confused 
Expected Behaviour should be, the tags should not be shown as plain string in the toast, and shown as a link instead, and not undefined like the current behaviour.
To see the issue:
Click on any of the buttons in the stackblitz, and you will see the message is undefined instead of a string. (i tried to reproduce what I am seeing in my application in here)
Ion-toast problem rep - StackBlitz (created again, to be more accurate to current situation)
From my research, there were suggestions on similar issue to use import { IonicSafeString } from ‘@ionic/angular/standalone’; but this didn’t fix the issue.
Ionic info:
Ionic:
Ionic CLI : 5.4.16 (C:\Users…)
Ionic Framework : not installed
@angular-devkit/build-angular : 16.2.16
@angular-devkit/schematics : 16.2.12
@angular/cli : 16.2.12
@ionic/angular-toolkit : 10.0.0
Utility:
cordova-res : not installed
native
System:
NodeJS : v18.20.4 (C:\Program Files\nodejs\node.exe)
npm : 10.1.0
OS : Windows 10
Please help… thank you…
I tried this in Vue and it worked as expected so I would say it is a bug with Ionic Angular.
I see you already created an issue over here - bug: IonicSafeString not accepted even after setting innerHTMLTemplatesEnabled to true in Ionic Config · Issue #30111 · ionic-team/ionic-framework · GitHub.
Hopefully the Ionic team will take a look soon!
Yes, I was worried that it won’t be fixed anytime soon, so I was wondering if anyone else here had insights. Hopefully it will be looked at soon.
Wait!!! It looks like you are setting the Ionic config in the wrong place. I did a fresh fork of the Ionic example and innerHTMLTemplatesEnabled should be set in main.ts. It works without using IonicSafeString too.
bootstrapApplication(AppComponent, {
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
provideIonicAngular({ innerHTMLTemplatesEnabled: true, mode: 'ios' }),
provideRouter(routes, withPreloading(PreloadAllModules)),
],
});
Here is a working example:
In the application I am working on, I do not see that bit, but I see this in main.ts
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.log(err));
defineCustomElements();
do you know how I could include that in here…?
Sorry I don’t as I am not that familiar with Angular. It seems from the StackBlitz you shared, Angular and Angular Standalone is being mixed as it is declaring an Ionic config in both the app.module.ts file and the main.ts file.
Looking at the Ionic starter projects, regular Angular it is declared in app.module.ts and for Standalone in main.ts.
If Angular allows you to mix the two, maybe you need to add the bootstrapApplication section in the project you are working on to configure Angular Standalone too?
Ah… I see - I think when I was trying to recreate what my problem was as much as possible, I must have mixed standalone in the stackblitz… I don’t think I have standalone in the application where the issue is happening though.
And yes you are right, for regular angular, it looks like it is declared in app.module.ts when I had a look. Config | Ionic Documentation
I had a bit of hope that maybe it’s me who is doing this all wrong and I needed to fix how I was doing it… but it doesn’t look like that is the case, not sure.
Currently in the application I am working in, this is what I have done:
in imports in app.module.ts.
IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),
Can you update your StackBlitz so it matches how your actual project is set up?
