How to use ngIf condition in ionic and angular and display the view accordingly?

Question

Currently I working on some home project and learning ionic. I am a php developer moving towards Ionic.

So basically I am using php concept in Ionic project and now I stuck with ngIf condition.

I have a profile page where user info is displayed. condition 1 :I want to display add card button if user has not setup their card detail

condition 2: if card detail already the card is setup I want to show edit the card button and hide the add card button.

here is the HTML view.

<ion-row *ngFor="let c of card  | async">
  <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px">
  <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button>
</ion-row>
<ion-row >
  <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button>
  <img src="http://placehold.it/200x100" width="100%" height="30px">
</ion-row>

Thanks.

Answer 1

You can use something like:

<ng-container *ngIf="(card | async)?.length > 0; else noCard">
    <ion-row *ngFor="let c of card  | async">
        <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px">
        <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button>
    </ion-row>
</ng-container>
<ng-template #noCard>
    <ion-row>
      <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button>
      <img src="http://placehold.it/200x100" width="100%" height="30px">
    </ion-row>
</ng-template>

Answer 2

Here's how you do it with ngIfElse

<ion-row *ngFor="let c of card  | async">
    <div *ngIf="condition; else other">
        <button ion-button (click)="addCard()" clear color="core" class="text">Add Card</button>
        <img src="http://placehold.it/200x100" width="100%" height="30px">
    </div>
    <ng-template #other>
        <img src="assets/imgs/{{c.cardtype}}.png" width="100%" height="30px">
        <button ion-button (click)="editCard(c)" clear color="core" class="text">Edit Card</button>
    </ng-template>
</ion-row>