Button and href tag

@nylex

There is no way to create buttons that trigger the call or mail easily?
Could you explain in more detail the solution you used?

Thanks,
Alejandro

trying something like

    call(item:User):string {
        return `tel:${item.phone}`;
    }
<span (click)="call(user)">

That did not work for me.

<button clear (click)="call()">
<ion-icon name="call"></ion-icon>
</button>

call(): string {
    return 'tel:1234567';
}

can you try [attr.href] instead of (click)?

You could try to set the button and its attributes as attributes of <a>:

<a button href="tel:1234567" clear item-right><ion-icon name="call"></ion-icon>Call</a>

This works for me.

2 Likes

Only I don’t understand, why you can’t use <a href=""> tag?

1 Like

Perfect, It works.

I did not know you could make a button in this way, did not find it in the documentation, thank you very much.

<a button href="tel:12345789" clear>
  <ion-icon name="call"></ion-icon>
</a>
2 Likes

I didn’t find any documentation about it either. I just saw a similar approach in the docs with

<a ion-item ...></a>

for creating an anchor item. So I tried it out with button instead.

1 Like

Sorry, “tel” link is working using ionic serve but not in ionic view app
preview, thats right? Will it work after build the app? I couldnt try it
yet.

I dont’ use the ionic view app, but on my android phone (5.1) it works perfect and opens the phone app together with the correct phone number.

HTML :
<button (click)='callWithNumber('123456789')'> Call </button>

Method :
callWithNumber(mobileNumber){ window.open("tel:" + mobileNumber); }

This worked for me on Android phone. :slight_smile:

2 Likes

This is what I use:

<a href="mailto:abc@abc.com?Subject=Help%20ABC" target="_top" ion-button full clear>
   <ion-icon name="mail"></ion-icon>
</a>

Hope it helps.

2 Likes

you can try this , it work for me.

  <a href="yourlink" target="_top" ion-button full clear>
      <button ion-button>Enter Button</button>
   </a>

try this [href]="‘tel’+item.phone"

I was having the same problem with ionic 5, href is just not working.
I was getting the HTML from an API and had to use it within an innerHTML.

I couldn’t use ion-button (because of the innerHTML) and had to fix it in another way.
This is my workaround (it is surely not the best way of doing it but it may help someone).

 export class ExampleComponent {
  aCounter = 0
  content = "<p><a href="google.ch">first url</a><a href="google.ch>second url</a></p>"

  constructor(private _iab: InAppBrowser) {}

  ngOnInit() {
    let regex = /<a/gi

    if (this.content) this.content = this.content.replace(regex, () => this.replaceA())
  }

  ngAfterViewInit(): void {
    if (this.aCounter > 0) {
      for (let i = 1; i <= this.aCounter; i++) {
        let a = document.getElementById(this.mainTitle + i)
        if (!a) {
          this.ngAfterViewInit()
          break
        } else {
          a.addEventListener('click', () => this.openBrowser(a.getAttribute('href')))
        }
      }
    }
  }

  replaceA(): string {
    this.aCounter++
    return `<a id="${this.mainTitle}${this.aCounter}"`
  }

  openBrowser(url: string) {
    this._iab.create(url, '_system')
  }
}
 <p [innerHTML]="content | safe: 'html'"></p>

There are reasons this is so hard - some involving performance, but most importantly security. I think you have one of two situations, both of which are bad:

  • you’ve written a backend that produces HTML
  • somebody else has written a backend that produces HTML and you have to blindly trust that there isn’t anything dangerous in it

So either way, I would urge you to reconsider HTML as a backend transfer format for Ionic apps. Use JSON instead and something like this skeleton idiom to render it.

1 Like

Thx for your answer.
I’m using the tinymce editor and only a, strong and p are accepted. Rest get sanitized when editing. And is then send as a string to the server.

This editor can only be filled by trusty people.

Does it still seems to be dangerous?

If yes I’ll be glad to try your solution

It’s less dangerous than many designs I’ve seen here, but <a href="javascript:ruh_roh()"> can still wreak havoc.

1 Like

Thx, I’ve also tested with the onclick event listener on a p tag and confirm that this is also working. (should be escaped by tinymce, but I thought that a malicious user could send it directly from e.g. postman.

Now I’m wondering why Ionic is disabling href since any other event listener are working. But I may be off-topic