angularionic-frameworkhybrid-mobile-appionic5angular-standalone-components

Ionic 8 with Angular 18 Standalone Component using innerHTMLTemplatesEnabled in Action Sheets for Custom HTML


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.


Solution

  • 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))
      ],
    });