How to use ngIf;else in Ionic 5

Issue

I tried the below code to show data if there is no data it'll show a message. but it's not worked.

<ng-container *ngFor="let payment of orderTotals">

<ng-template *ngIf="payment?.length==0; else data">
  <h4>No Data</h4>
</ng-template>

<ng-template #data>

  <ion-card>
    <ion-card-title>
      <h4 class="ion-text-center" style="font-weight: bold">
        {{payment.PaymentStatus}}
      </h4>
    </ion-card-title>
    <ion-card-subtitle style="padding-left: 10px">
      <h4 style="font-weight: bold">{{payment.Total | currency:'KWD '}}</h4>
    </ion-card-subtitle>
  </ion-card>

</ng-template>

Solution

I fixed it myself with the below way. I removed the ng-container and ng-template and validate it with div tag.

<div *ngIf="orderTotals.length==0">
<h4>No Data</h4>
</div>

<ion-card *ngFor="let payment of orderTotals">
<ion-card-title>
  <h4 class="ion-text-center" style="font-weight: bold">
    {{payment.PaymentStatus}}
  </h4>
</ion-card-title>
<ion-card-subtitle style="padding-left: 10px">
  <h4 style="font-weight: bold">{{payment.Total | currency:'KWD '}}</h4>
</ion-card-subtitle>
</ion-card>

Answered By - Brody