Angular 2 - Hide Panel with table when table is empty

0
votes

I have an *ngFor that creates panels that hold tables. The tables have an *ngFor that create <td>for each item in a data set.

On occasion the table will have null rows. Is there a smart way to use Angular to hide the panel with the table has no children? I can probably use jQuery to check for children on load, but I feel like there should be a more intuitive answer using Angular *ngFor.

<div class="col-md-12 col-lg-6 cell-box" *ngFor="let siteGroup of sqlData | FilterData:[currentDate, selectedGroup] | UniqueValue:['Site']">

                <!-- SD Data -->
                <div class="panel panel-midblue">
                    <div class="panel-heading">
                        <span>{{selectedGroup}} - {{siteGroup}}</span>
                    </div>
                    <div class="panel-body">
                        <table class="exportTable table table-hover table-condensed">
                            <thead>
                                <th>Metric Name</th>
                                <th>Daily&emsp;&emsp;&emsp;</th>
                                <th>Week to Date</th>
                                <th>Month to Date</th>
                                <th>Year to Date</th>
                            </thead>
                            <tr *ngFor="let item of sqlData | FilterData:[currentDate, selectedGroup, siteGroup, selectedType] | OrderBy:['MetricName',['Volume','TSF', 'ASA','AHT', 'ACW', 'ABAN', 'FCR']]" [attr.goalvalue]="item.DayMetGoal">
                                <td>{{item.MetricName}}</td>
                                <td class="cursor-hand" [attr.goalvalue]="item.DayMetGoal" (click)="ModalPopUp($event, item)">{{item.DayMetricValue | FormatMetric:item.MetricName }}</td>
                                <td class="cursor-hand" [attr.goalvalue]="item.WTDMetGoal" (click)="ModalPopUp($event, item)">{{item.WTDMetricValue | FormatMetric:item.MetricName }}</td>
                                <td class="cursor-hand" [attr.goalvalue]="item.MTDMetGoal" (click)="ModalPopUp($event, item)">{{item.MTDMetricValue | FormatMetric:item.MetricName }}</td>
                                <td class="cursor-hand" [attr.goalvalue]="item.YTDMetGoal" (click)="ModalPopUp($event, item)">{{item.YTDMetricValue | FormatMetric:item.MetricName }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel-footer">
                        <h5 class="text-muted"></h5>
                    </div>
                </div>

            </div>
1
angularngfor

1 Answers

2
votes

You can use [Hidden]

<h3 [hidden]="!favoriteHero">
  Your favorite hero is: {{favoriteHero}}
</h3>

See angular documentation: https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html#!#ng-show