Event handler with IonicSafeString for Alert box message

Question

.ts

private async openUpdatedTermsOfServiceAlert(): Promise<void> {
    const alert = await this.alertController.create({
      header: 'Updated Terms of Service',
      //issue is here
      message: 
 new IonicSafeString(`<ion-button id="terms-of-service">Clear</ion-button>`),
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: (): void => {},
        },
        {
          text: 'Continue',
          handler: (): void => {},
        },
      ],
      mode: 'ios',
      cssClass: 'play-next',
      backdropDismiss: false,
    });

    await alert.present();
  }

Can you tell me how to add click() event handler for this: i.e. I have tried many. But no luck yet.

`new IonicSafeString(`<ion-button fill="clear">Clear</ion-button>`),`

I have seen this feedback. But not clear how to do that with the above use case.Any help here?

Ref: https://github.com/ionic-team/ionic-framework/issues/25584#issuecomment-1183277927

Answer 1

Lead Developer and Product Manager for Ionic Framework: Liam DeBeasi helped me to solve this issue. Thanks to him.

.ts

 //.... other alert box code

 await alert.present();

 alert.querySelector('#terms-of-service').addEventListener('click', () => {
      this.router.navigateByUrl('legal/terms');
      this.alertController.dismiss();
    });

ionic.config.json

{
  "name": "my.Ionic",
  "innerHTMLTemplatesEnabled": true,//this is important here
  "type": "angular"
}