Is there any way to add a anchor tag to an Alert?

Ionic Framework ionic-v3
1

Currently i’m trying to go just a little outside the current bounds of an Alert in that I want to add a link in the message. A link in itself works just fine, but when I try do invoke a function on clicking the link I get a sanitization error.

Anybody know of a way that I might be able to make this work?

Thanks in advance! Code is below.

    let helpAlert = this.alertCtrl.create({
      title: 'Support',
      message:`
      Phone: ${this.DEFAULT_SUPPORT_PHONE_NUMBER} <br />
      Email: ${this.DEFAULT_SUPPORT_EMAIL} 
      ${ (this.platform.is("ios")) ?
        `
        <br />
        <a (click)="createPurchasedProductModal()">${this.DEFAULT_RESTORE_PURCHASE_TEXT}</a>
        `
        :
          ""
        }
      `,
      cssClass: "support-alert",
      buttons: ['OK']
    });
    helpAlert.present();
2

Alerts are intended to be super simple and hard to reformat, so I don’t know if this will work. But in a general situation, the doc you want is here.

https://angular.io/api/platform-browser/DomSanitizer

3

Thanks for the reply!

I have been messing with the DomSanitizer for quite some time now and it looks like the only way to do what I want is to use bypassSecurityTrustHtml on the [innerHtml] of the <div class='alert-message' element. As it stands right now though, it doesn’t look like i’m able to get access to it.

This is my best guess anyway, not 100% sure it will work without being able to grab that div.

4

I just looked at alert-component.ts, and yeah, I agree, I don’t think there’s a way to do it. You have pretty much total formatting power in both modals and popopvers, so maybe you could display your error/help message that way.

5

Well I have a very dirty workaround below. Not sure I would advise anyone to do it this way, but for now it works.

    setTimeout(()=>{
      jQuery(".alert-message a").on("click", () => {
        this.createPurchasedProductModal();
      });
    },500);

I think it would be a nice to be able to set a bypassSecurityFlag for the Alert message. This way others wouldn’t have to resort to this in the future.

6

You could post a feature request on Github. The devs aren’t likely to notice a passing comment here. I will say that their attitude has been, “Alerts are supposed to be simple,” when people make requests like this. But they are upgrading a lot of things for Ionic 4, so who knows.

1 Like
7

Thanks for the help!

Lets see where this one goes. I went ahead and added a feature request here

1 Like