bug: ion-button in Alert IonicSafeString events not firing

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When creating a new alert using AlertController and passing in an IonicSafeString with an <ion-button></ion-button> element, the ion-button rendered in the alert modal does run any click actions or any routerLink directive navigations. The button click event is a no-op.

If ion-buttons cannot be used in this way, then the documentation is incorrect here:

import { IonicSafeString, ToastController } from '@ionic/angular';

...

constructor(private toastController: ToastController) {}

async presentToast() {
  const toast = await this.toastController.create({
      message: new IonicSafeString('<ion-button>Hello!</ion-button>'),
      duration: 2000
  });
  toast.present();
}

Expected Behavior

When you want to create an alert with additional ion-button elements with routerLink navigations within the alert modal (as opposed to in the buttons array), this should be enabled when using an IonicSafeString

Steps to Reproduce

Create an alert as follows and see that the ion-button element will not route to the desired path (or handle any click event).

    private readonly alertCtrl: AlertController
    ...
    const alert = await this.alertCtrl.create({
      header: 'Title',
      message: new IonicSafeString(`Some other details, click here:
        <ion-button routerLink="desired/path/">Button</ion-button>`),
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
        },
      ],
    })
    await alert.present()

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI: 6.20.1
   Ionic Framework: @ionic/angular 6.0.13
   @angular-devkit/build-angular : 13.3.0 
   @angular-devkit/schematics : 13.3.0 
   @angular/cli : 13.3.0 
   @ionic/angular-toolkit : not installed

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v16.11.0
   npm : 8.0.0
   OS : macOS Catalina

### Additional Information

_No response_

[liamdebeasi]

If you eject from the sanitizer, Ionic will not strip out click handlers. You are still using the raw Web Component, so you will need to use an onclick handler or use addEventListener instead of (click) in Angular.

[elvece]

Thanks for the issue. Can you provide a GitHub repo I can use to verify this behavior?

I don’t have this committed in a project as I ended up writing a custom component. I could spin up a demo repo if that is necessary?