how to write conditional statement inside ionic html template

Question

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 ?

Answer 1

Another way of handling conditional template is by using *ngIf
if the expression tran.tranType is 'R' , then inline template is shown .i.e You have redeemed ( value of expression tran.pointsRedeemed) points.

<ion-content>
  <ion-list>
    <ion-item *ngFor="let tran of transactions">      
      <p *ngIf=" tran.tranType == 'R'" > You have redeemed  {{tran.pointsRedeemed}} points.  </p>
      <p *ngIf=" tran.tranType == 'E'" > You have earned  {{tran.pointsEarned}} points.  </p>  
    </ion-item>
  </ion-list>
</ion-content>
</ion-content>

Answer 2

I'm not sure of what's exactly the question, but you can write a conditional statement like this:

  <ion-list>
    <ion-item *ngFor="let tran of transactions">
     <p> {{tran.pointsEarned}} {{ tran.tranType === 'R' ? 'Redeem' : 'Earn' }}</p> 
    </ion-item>
  </ion-list>

There're a lot of ways to do it, but I guess that the ternary operator is the easiest and cleanest one.