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 ?
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>
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.
I'm not sure if we are on the same page, but this is another way for if...else statement:
<div *ngIf = "tran.tranType == 'R'; else elsetag">
Redeem
</div>
<ng-template #elsetag>
<div>
Earn
</div>
<ng-template>