Hi all,
I’m wondering what’s the best way to show or hide HTML elements based on conditions in Ionic applications. I’m not sure if I’m currently doing it right / the way it should be.
Let’s say I have a couple of themes (products) displayed by cards with the ion-card components. Some of the products can be purchased via InApp Purchases and others are free.
I now have to make sure which one are free, paid, have been purchased etc. and therefore display either a click function to open a modal or navigate to the page where the product can be purchased.
My HTML code currently looks like this:
<ion-grid>
<ion-row>
<ion-col *ngFor="let theme of themes">
<!-- If it's a free theme or already owned, display useTheme function -->
<ion-card *ngIf="theme.category == 'free' || theme.owned == true" (click)="useTheme(theme.themeID)">
<ion-badge *ngIf="theme.owned == true">purchased</ion-badge>
<ion-img [src]="theme.src"></ion-img>
</ion-card>
<!-- If it's a paid theme and not owned, provide a link to the purchase page -->
<ion-card *ngIf="theme.category == 'paid' && theme.owned == false" routerLink="link/to/theme/purchase">
<ion-badge>1,99 EUR</ion-badge>
<ion-img [src]="theme.src"></ion-img>
</ion-card>
<ion-text>{{theme.description}}</ion-text>
</ion-col>
</ion-row>
</ion-grid>
Is this the right way? Or do you suggest handling the if/else stuff in the array item in my .ts files and avoiding *ngIf-conditions like these in my HTML?
I’m asking because sometimes I face the problem that the images of my paid products are not displayed on the initial app start. They just show up as soon as I click on some elements or navigate to a different page.
Thank you in advance for any suggestions and best regards!