CODEWITHSUNDEEP
ionic-frameworkionic3
Rahul Pamnani
Rahul Pamnani

Reputation: 1435

How to apply hyperlink depending upon the details fetched from the API In Ionic

I am working on the Ionic Project and it that I have the contact page which is fetching the details from the API. I want to apply the hyperlink according to the details fetched like if it is a mobile number then tel is applied and for the email mailto is applied.

This is my contact.html:

<ion-content padding overflow-scroll="true">
  <ion-grid align-items-center justify-content-center>
    <ion-row align-items-center justify-content-center>
      <ion-col class="mycol22" col-12 *ngFor="let contdetails of this.detailscontact">
          <h3 class="myneh31">{{contdetails?.sub_head}}</h3>
          <hr />
          <a href="tel or mailto"><p class="newmyp2">{{contdetails?.sub_content_first}}</p></a>
          <a href="tel or mailto"><p class="newmyp2">{{contdetails?.sub_content_second}}</p>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

The problem is that, How to decide whether to apply tel or mailto depending on the value fetched. This is my output according to the details fetched from the API. Now, I want to apply hyperlink depending upon the details fetched from the API. For Email: mailto will apply and for Mobile Number: tel will be applied.

Any help is much appreciated.

enter image description here

Upvotes: 0

Views: 72

Answers (2)

ZearaeZ
ZearaeZ

Reputation: 905

First you have to check if data is email type or not. Use this function as a email validator.

emailValidator(email:string): boolean {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return false;
    }
    return true; 
}

And in your html page 

<a href="{{emailValidator(email) == true ? 'mailto' || 'tel'}}"></a>

To make yourself easy you can return string from emailValidator function:

emailValidator(email:string): string {
    var EMAIL_REGEXP = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

    if (!EMAIL_REGEXP.test(email)) {
        return 'mailto';
    }
    return 'tel'; 
}

and in HTML you can use 

<a href="{{emailValidator(email)}}"></a>

Upvotes: 4

Vega
Vega

Reputation: 28708

*ngIf should come handy:

  <a href="tel" *ngIf="condition">...</a> // or any boolean as condition
  <a href="mailto" *ngIf="!condition">...</a>  // or any other condition

Upvotes: 2

Related Questions