How not to show a table if it's empty in Angular2 - html

Question

I'm looking for a solution on how not to show my table if there is no data in it. I tried with *ngIf but it didn't work, maybe I did it wrong.
I don't think [hidden] is a good solution.
Here is my code :
<div *ngIf="exceptions">
<h1 class="applicationTitle">Exceptions</h1>
<table class="table table-hover table-condensed">
<th>Date</th>
<th>Timeslot</th>
<tr *ngFor="#exception of exceptions">
<td>{{exception.date}}</td>
<td>{{exception.value}}</td>
</tr>
</table>
</div>

Answer 1

You can use *ngIf
<table *ngIf="exceptions" class="table table-hover table-condensed">
<th>Date</th>
<th>Timeslot</th>
<tr *ngFor="let exception of exceptions">
<td>{{exception.date}}</td>
<td>{{exception.value}}</td>
</tr>
</table>

Answer 2

<div *ngIf="exceptions.length > 0">
<h1 class="applicationTitle">Exceptions</h1>
<table class="table table-hover table-condensed">
<th>Date</th>
<th>Timeslot</th>
<tr *ngFor="#exception of exceptions">
<td>{{exception.date}}</td>
<td>{{exception.value}}</td>
</tr>
</table>
</div>
You just need to update your If condition that's all.

Answer 3

<table class="table table-hover table-condensed" *ngIf="exceptions.length > 0">
Keep in mind though ngIf will remove the element from the DOM, which might be an expensive operation if your table is really large. In that case you might be better of using [hidden] after all.