Given the following array in component property groups:
[
{
"name": "pencils",
"items": ["red pencil","blue pencil","yellow pencil"]
},
{
"name": "rubbers",
"items": ["big rubber","small rubber"]
},
]
How to create a html table with all items, each in one row? The expected HTML result:
<table>
<tr><td><h1>pencils</h1></td></tr>
<tr><td>red pencil</td></tr>
<tr><td>blue pencil</td></tr>
<tr><td>yellow pencil</td></tr>
<tr><td><h1>rubbers</h1></td></tr>
<tr><td>big rubber</td></tr>
<tr><td>small rubber</td></tr>
</table>
The first level is easy:
<table>
<tr *ngFor="#group of groups">
<td><h1>{{group.name}}</h1></td>
</tr>
</table>
But now I have to iterate #item of group. The problem is that I need the new <tr> elements after the </tr> element which defines group, not inside.
Is there any solution for this kind of problems in Angular2 templating? I would expect some special tag which I could use instead of <tr> which is not written into the dom. Something similar to facets and fragments in JSF.
<table>
<ng-container *ngFor="let group of groups">
<tr><td><h2>{{group.name}}</h2></td></tr>
<tr *ngFor="let item of group.items"><td>{{item}}</td></tr>
</ng-container>
</table>
You can use the template syntax of ngFor on groups and the usual syntax inside it for the actual rows like:
<table>
<template let-group ngFor [ngForOf]="groups">
<tr *ngFor="let row of group.items">{{row}}</tr>
</template>
</table>
Here is a basic approach - it sure can be improved - of what I understood to be your requirement.
This will display 2 columns, one with the groups name, and one with the list of items associated to the group.
The trick is simply to include a list within the items cell.
<table>
<thead>
<th>Groups Name</th>
<th>Groups Items</th>
</thead>
<tbody>
<tr *ngFor="let group of groups">
<td>{{group.name}}</td>
<td>
<ul>
<li *ngFor="let item of group.items">{{item}}</li>
</ul>
</td>
</tr>
</tbody>
</table>