title: Angular2 ngif only show active status data
body: <p>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:</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div class="col-md-6 mb-5" *ngFor="let outlet of outletLists"&gt;
              &lt;ng-template [ngIf]="outlet.outlet.status === 'active'"&gt;
  
              &lt;div class="card card-xs"&gt;
                  &lt;div class="card-block"&gt;
                      &lt;div class="media"&gt;
                          &lt;div class="media-body"&gt;
                              &lt;p class="card-title"&gt;{{ outlet.outlet.outletName }} {{ outlet.outlet.status }}&lt;/p&gt;
                              &lt;p class="small text-muted"&gt;{{ outlet.outlet.location }}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/ng-template&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>this.http.get(this.api)
      .map(res =&gt; res.json())
      .subscribe(data =&gt; {
          this.outletLists = data;
      }, error =&gt; {
          console.log(error);
      });
  </code></pre>
  
  <p><strong>data.json</strong></p>
  
  <pre><code>[{
    "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"
    }
  </code></pre>
  
  <p>}]</p>
  
  <p><strong>output:</strong>
  <a href="https://i.stack.imgur.com/Ondfw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ondfw.png" alt="enter image description here"></a></p>