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.
