Writing conditional statement inside ionic html template

I am porting my application from jquery to ionic framework. In jquery , i am writing javascript code to manually concatenate html tags. Pasting a portion of the same from jquery code

  for ( count = start - 1; count < end ; count ++ )
            {
                if (tranList[count].tranType == "R" )
                    tranType = "Redeem" ;
                else 
                    tranType = "Earn";

                text += "<tr> <td>"+ tranType +  "</td>" ;

In Ionic , i am trying to write the same code using ionic list Below is my html template

 <ion-list>
    <ion-item *ngFor="let tran of transactions">
     <p> {{tran.pointsEarned}} </p> 
    </ion-item>
  </ion-list>

Next to pointsEarned , i need to print points are redeemed or earned similar to jquery code . How do i achieve this ?

A couple of ways:

transactionFlavor(tran: Transaction) {
  if (tran.tranType === 'R') {
    return "Redeem";
  } else {
    return "Earn";
  }
}

{{transactionFlavor(tran)}}

or

{{tran.tranType === 'R' ? 'Redeem' : 'Earn'}}
2 Likes

Main difference from Jquery is you can’t manipulate DOM like that once a page is loaded (even if heavily loading async data).

So your view (example.html file) will be a view of what is prepared in example.ts file (TypeScript - the equivalent to your old jquerycustom.js file) (both must be in the same folder).

And then rapropos example will work easily.

I suggest you read a few tutorials about Ionic 2 and Angular 2, it will definitely debunk and explain it more clearly than I do.