Search code examples
ionic4

Ionic 5 ng if showing empty card

When I portrait mode *ngIf it hides values what I want but when I make the device landscape it's showing empty cards between true values.

<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngFor="let order of orders">
            <ion-card *ngIf="order.status =='CL'">
                <ion-card-title>
                    <h4>{{order.title}}</h4>
                </ion-card-title>
                <ion-card-content>
                    <ion-item>
                        <h4>{{order.description | filter:[200, '...']}}</h4>
                    </ion-item>
                </ion-card-content>
                <ion-button type="button" color="danger">Canceled</ion-button>
                <ion-button type="button" color="primary">Delivered</ion-button>
            </ion-card>
        </ion-col>

Landscape image

Solution

  • The problem is that you're hiding the card but you're still leaving an empty column. Please try by hiding both the card and the column instead:

    <ng-container *ngFor="let order of orders">
  <ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngIf="order.status =='CL'">
    <ion-card > 
      ...
    </ion-card>
  </ion-col>
</ng-container>