How to use Angular2 templates with *ngFor to create a table out of nested arrays?
<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>