I am using Ionic 8 with Angular 18 in a standalone project. I am trying to create an alert with custom HTML. Here is my TypeScript code:
async presentAlert() {
const alert = await this.alertController.create({
cssClass: 'delete-project-confirmation',
message: `
<ion-icon name="trash-sharp" class="delete-icon"></ion-icon>
<p>Are you sure?</p>
<p>This action will delete your project.
You won’t be able to revert this!</p>
`,
buttons: [
{
cssClass: 'delete-btn',
text: 'Yes, delete it',
},
{
text: 'Cancel',
role: 'cancel',
cssClass: 'cancel-btn',
},
],
});
await alert.present();
}
And here is my SCSS:
.delete-project-confirmation {
.alert-wrapper {
text-align: center;
border-radius: 10px;
}
.alert-message {
font-size: 16px;
font-weight: 500;
}
.delete-icon {
font-size: 48px;
color: var(--ion-color-danger);
}
.alert-button.cancel-btn {
color: var(--ion-color-primary);
}
.alert-button.delete-btn {
color: var(--ion-color-danger);
}
}
I have added the following line in main.ts:
import { IonicModule } from '@ionic/angular';
bootstrapApplication(AppComponent, {
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
provideIonicAngular(),
provideRouter(routes, withPreloading(PreloadAllModules)),
importProvidersFrom(
IonicModule.forRoot(
{ innerHTMLTemplatesEnabled: true } // Added
)
)
],
});
But it only works on the web; when I create an Android application, it shows the HTML as text.
I just need to add innerHTMLTemplatesEnabled inside provideIonicAngular for standalone, and it will work. Here is the code snippet.
import { provideIonicAngular } from '@ionic/angular/standalone';
bootstrapApplication(AppComponent, {
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
provideIonicAngular({
innerHTMLTemplatesEnabled: true // Add here
}),
provideRouter(routes, withPreloading(PreloadAllModules))
],
});