How to use Angular2 templates with *ngFor to create a table out of nested arrays?

Question

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.

Answer 1

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