How do I hide my table element when the component is empty? - html

Question

The html is printing all the API data in the table. Products and Components
The table should not print the product when the components are empty. What is the best way to do this?
I'm using angular 8
products = {
"id": 1,
"name": "John",
"components": [
{
"id": 130,
"name": "Price",
}
]
"isSelected": false }
products = {
"id": 2,
"name": "name",
"components": [] }
<div class="card">
<div class="card-body">
<table class="table table-striped table-bordered hover">
<thead>
<tr>
<th width="1%" class="text-center"></th>
<th width="8%" class="text-center">Id</th>
<th width="8%" class="text-center">Name</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let product of products; index as i">
<tr>
<td>
<div>
<button class="btn btn-sm btn-default"></button>
</div>
</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
</tr>
<tr *ngFor="let prodComp of product.components">
<td></td>
<td>{{prodComp.id}}</td>
<td>{{prodComp.name}}</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>

Answer 1

You could add another container inside your *ngFor using *ngIf to test for that condition:
<ng-container *ngFor="let product of products; index as i">
<ng-container *ngIf="product.components.length > 0">
<tr>
<td>
<div>
<button class="btn btn-sm btn-default"></button>
</div>
</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
</tr>
<tr *ngFor="let prodComp of product.components">
<td></td>
<td>{{prodComp.id}}</td>
<td>{{prodComp.name}}</td>
</tr>
</ng-container>
</ng-container>