CODEWITHSUNDEEP
typescriptionic-framework
Jhon Caylog
Jhon Caylog

Reputation: 503

pass value to an href tag in typescript ionic

How to set the value to href tag from my input field. When user will click the value of href tag which is ="skype:+ (value from input)? should call.

<ion-content padding>
    <ion-col>
         <ion-label color="primary">Enter The No.</ion-label>
    <ion-input placeholder="Text Input"></ion-input>
      <a href="skype:+jelordrey?call">
    <button  ion-button color="secondary">test</button>
     </a>
       <!--  <a href="skype:+jelordrey?call">
               <button >
                        Click to open Skype and dial the no:+1234567890
              </button>
      </a> -->
 </ion-col>

</ion-content>
export class SkypecallPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SkypecallPage');
  }

}

Upvotes: 0

Views: 3205

Answers (2)

Mahesh Jadhav
Mahesh Jadhav

Reputation: 1089

You are using an input to take data from the user. So you have to first use ngModel on that ion-input so that you can bind the model name to your href attribute:

So use the following in your html:

<ion-item>
   <ion-label color="primary">Enter The No.</ion-label>
  <ion-input type="text" placeholder="Enter Your Number" [(ngModel)]="userNumber"></ion-input>  //you can use any model name and declare it in your ts
</ion-item>

and then use that ngModel value to bind it in your href attribute using [attr.href]:

<a>[attr.href]="'skype:+' + userNumber + '?call'"</a>

and as SAJ said it can throw you an "sanitizing unsafe URL value" warning then use DomSanitizer and you will be good to go. Use the same stack-overflow link as SAJ has mentioned to check how you can handle unsafe url

Upvotes: 1

Sathyajith
Sathyajith

Reputation: 4024

You can use [attr.href] option to dynamically set the href value. The code will look something like shown below 

<a [attr.href]="'skype:+' + name + '?call'">
 <button ion-button color="secondary">test</button>
</a>

If angluar is detecting it as unsafe url by prefixing unsafe: string in href while doing the above, you might have to make it safe url using dom sanitizer. You can check this link to see how to use dom sanitizer

Upvotes: 1

Related Questions