Best way to use conditions (*ngIf vs. functions)

@keber wrote:

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!

Posts: 1

Participants: 1

Read full topic