I only want to show active outlet. But with this code I able hide the inactive outlet but html element still exist and its break the design. I've shared the output as well. Here is my code:

**app.component.html**

```
<div class="col-md-6 mb-5" *ngFor="let outlet of outletLists">
            <ng-template [ngIf]="outlet.outlet.status === 'active'">

            <div class="card card-xs">
                <div class="card-block">
                    <div class="media">
                        <div class="media-body">
                            <p class="card-title">{{ outlet.outlet.outletName }} {{ outlet.outlet.status }}</p>
                            <p class="small text-muted">{{ outlet.outlet.location }}</p>
                        </div>
                    </div>
                </div>
            </div>
            </ng-template>
        </div>

```

**app.component.ts**

```
this.http.get(this.api)
    .map(res => res.json())
    .subscribe(data => {
        this.outletLists = data;
    }, error => {
        console.log(error);
    });

```

**data.json**

```
[{
  "mdrPercent": 21, 
  "index": 0, 
  "transaction": {
     "status": "void", 
     "referenceId": "599515bc8a7b11232747bd95", 
     "customerName": "Darla Madden", 
     "cashier": "Melissa Blackwell", 
     "notes": "anim pariatur duis reprehenderit pariatur duis proident sunt dolore exercitation", 
     "outletName": "Rita Ellis", 
     "deviceId": "599515bc3bc0a8e9aa11f94f", 
     "time": "11:43:44", 
     "date": "2017-02-14", 
     "transactionId": "599515bc74bf959a928ba6dc", 
     "amountPaid": 90.010000000000005
  }, 
  "mdrRebate": 334.88999999999999, 
  "nettAmount": 322.76999999999998, 
  "status": "void", 
  "deviceId": "599515bc58e46cca66c914be", 
  "mdrAmount": 356.44, 
  "time": "10:21:45", 
  "date": "2016-03-07", 
  "transactionId": "599515bc861d4362aadf7fd9", 
  "amountPaid": 90.019999999999996, 
  "transactionAmount": "1,938.75", 
  "isActive": false, 
  "outlet": {
     "status": "active", 
     "outletName": "Olivia Griffin Sdn Bhd", 
     "image": "http://placehold.it/100x100", 
     "outletId": "599515bcb5ed64a61c137bbb", 
     "location": "Goodwin, Malaysia"
  }

```

}]

**output:**
[![enter image description here](https://i.stack.imgur.com/Ondfw.png)](https://i.stack.imgur.com/Ondfw.png)