Button and href tag

Hey guys, can anyone point me to the right direction, how can i add href tel: xxxx to the button? adding href tag gives an error. can i acheive the same with (click)?

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

or

<button (click)="call('tel:1234567')" secondary clear item-right>
   <ion-icon name="call"></ion-icon>
    Call
</button>

hi, data-href does not work, i get the following error.

Can't bind to 'href' since it isn't a known native property ("
    </ion-card-content>
    <ion-item *ngIf="!showConfirmAction(item)">
        <button [ERROR ->]data-href="tel:{{ item.phone }}" secondary clear item-right>

hm hm… Try this

[attr.href]="tel:{{ item.phone }}"

now i get this browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Quotes are not supported for evaluation!

but when i change to [attr.href]="item.requestor.username" no error, but how to add “tel:” :confused:

Could you solve that?

I’m getting the following error:

EXCEPTION: Error: Uncaught (in promise): Quotes are not supported for evaluation!

My code:

<button clear [attr.href]="tel:55481548">
  <ion-icon name="call"></ion-icon>
</button>

couldnt do it within the template, so had to create a typescript function.

@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:

3 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>