Button and href tag

Ionic Framework ionic-v3
1

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

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

hm hm… Try this

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

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:

6

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

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

8

@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

9

trying something like

    call(item:User):string {
        return `tel:${item.phone}`;
    }

<span (click)="call(user)">
10

That did not work for me.

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

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

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

12

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
13

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

1 Like
14

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
15

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
16

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.

17

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.

18

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
19

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
20

you can try this , it work for me.

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