nylex
July 28, 2016, 6:12am
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>
<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>
nylex
July 28, 2016, 4:13pm
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>
hm hm… Try this
[attr.href]="tel:{{ item.phone }}"
nylex
July 29, 2016, 8:21am
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:”
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>
nylex
August 10, 2016, 3:39am
7
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
nylex
August 10, 2016, 5:13am
9
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';
}
nylex
August 10, 2016, 5:40am
11
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.
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
sanuck
September 25, 2019, 1:14pm
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>