I am dealing with 2 tables that contain various data sets.
If both of my tables happen to be empty, I would prefer them to be hidden.
Is it feasible to implement this in Angular? If you have a solution for me, I would be eager to give it a shot.
Here is the snippet of code:
file.html
<div class="row" > ;
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped">
<tr style="background-color: #f8f9fa;">
<td style="width: 13%;">Opening</td>
<td style="width: 13%;">Highest</td>
<td style="width: 13%;">Lowest</td>
<td style="width: 13%;">Last</td>
<td style="width: 15%;">Trend</td>
<td style="width: 6%;"> Time</td>
<td style="width: 15%;">Day volume</td>
<td style="width: 10%;">Last update</td>
</tr>
<tr *ngIf="statusLine.open != 0">
<td>
{{statusLine.open | number:'1.6-6' }}
</td>
<td>
{{statusLine.high | number:'1.6-6' }}
</td>
<td>
{{statusLine.low | number:'1.6-6' }}
</td>
<td>
<span *ngIf="statusLine.tendancySign < 0" style="color: red;">
{{statusLine.close | number:'1.6-6' }}
</span>
<span *ngIf="statusLine.tendancySign >= 0" style="color: green;">
{{statusLine.close | number:'1.6-6' }}
</span>
</td>
<td class="no-wrap">
<span *ngIf="statusLine.tendancySign < 0" style="color: red;">
<span
style="background:url(/assets/images/toto-online-sprites.png) 1px -834px no-repeat;position:relative;top:5px; display: inline-block;"> </span> {{statusLine.tendancyPercent
| number:'1.2-2' }}
</span>
<span *ngIf="statusLine.tendancySign >= 0" style="color: green;">
<span *ngIf="statusLine.tendancySign > 0"
style="background:url(/assets/images/toto-online-sprites.png) -296px -834px no-repeat;position: relative;top:5px; display: inline-block;"> </span> {{statusLine.tendancyPercent
| number:'1.2-2' }}
</span>
%
</td>
<td>
{{statusLine.heure | getXFirstElements:'5'}}
</td>
<td>
{{statusLine.volume | number:'1.0' }}
</td>
<td>
{{statusLine.update | getXFirstElements:'5'}}
</td>
</tr>
</table>
</div>
<ng-container *ngIf="statusLinesII.length > 0">
<div class="table-responsive">
<table class="table table-striped">
<tr style="background-color: #f8f9fa;">
<td style="width: 20%;" class="text-right">
<span> Number of buyers </span>
</td>
<td style="width: 16%;" class="text-right">
<span> Bid size </span>
</td>
<td style="width: 10%;" class="text-right">
<span> Limit bid </span>
</td>
<td style="width: 6%;"> </td>
<td style="width: 10%;"> Limit ask </td>
<td style="width: 16%;" class="text-right">
<span> Quantity ask </span>
</td>
<td style="width: 20%;" class="text-right">
<span>Number of sellers </span>
</td>
</tr>
<tr *ngFor="let line of statusLinesII">
<ng-container *ngIf="canShowLine(line)">
<td style="border: 0px;" class="text-right">
<span>
{{line.acheteurNumber }}
</span>
</td>
<td style="border: 0px; text-align: right;">
<span>
{{line.acheteurQty }}
</span>
</td>
<td style="border: 0px; text-align: right;">
<span>
{{line.acheteurCours | number:'1.6-6' }}
</span>
</td>
<td style="border: 0px;text-align: right;">
<span>
{{line.vendeurCours | number:'1.6-6' }}
</span>
</td>
<td style="border: 0px;text-align: right; ">
<span>
{{line.vendeurQty }}
</span>
</td>
<td style="border: 0px;" class="text-right">
<span>
{{line.vendeurNumber }}
</span>
</td>
</ng-container>
</tr>
</table>
</div>
</ng-container>
</div>
</div>
</div>
</div>
A thorough search on google did not yield any concrete solutions for my issue.
Your assistance is greatly appreciated!