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

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-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>
          <!-- 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>

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!