CODEWITHSUNDEEP
htmlangular
Florian Guebel
Florian Guebel

Reputation: 37

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

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>

Upvotes: 1

Views: 2909

Answers (3)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

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>

Upvotes: 2

The Hungry Dictator
The Hungry Dictator

Reputation: 3484

<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.

Upvotes: 1

Brother Woodrow
Brother Woodrow

Reputation: 6372

<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.

Upvotes: 0

Related Questions