How to hide unused items with ngFor ionic?

Question

im trying to hide unused items from ngFor, the problem is, i did hide it successfully but its place still exists and empty like the image below:

My ts file:

Answer 1

Two options:

Refactor the template into the following:

<ion-list padding>
  <ng-container *ngFor="let c of coupon; trackBy: trackElement">
    <ion-item *ngIf="c.coEmail == shared.customerData.email">
      <div >
        {{c.expiry}}
        {{c.code}}
      </div>
     </ion-item>
  </ng-container>
 </ion-list>

Or store the filtered elements of the list in another instance member of the component:

this.filteredCoupons = this.coupons.filter(c => c.coEmail == this.shared.customerData.email)

<ion-list padding>
    <ion-item *ngFor="let c of filteredCoupons; trackBy: trackElement"> 
      <div>
      {{c.expiry}}
      {{c.code}}
      </div>
     </ion-item>
  </ion-list>