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.

Can you add the HTML output that you expect as result. I don't get it what you mean by "after the ``. — Günter Zöchbauer, Feb 29 '16 at 12:50
I guess you need flatten the nested JSON structure in code first. — Günter Zöchbauer, Feb 29 '16 at 12:56
That would be verry sad. I would have to create redundant data and keep it in sync :-( — Witek, Feb 29 '16 at 12:59
Angular allows to build custom structural directives like `ngIf`, `ngFor`. You could build an ngFor variant that does that ;-) — Günter Zöchbauer, Feb 29 '16 at 13:00
There is an `tbody` element too, perfectly suitable for this case. — Akxe, Sep 28 '16 at 23:37

score 58 · Answer 1 · edited Sep 18 '18 at 00:27

58

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

edited Sep 18 '18 at 00:27

Luan Kevin Ferreira

1,184
2
16
40

answered May 20 '17 at 14:09

Victor

617
5
5

Abdulrahman Alsoghayer · Answer 2 · 2016-05-11T12:21:04.360

27

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>

Check this plunk

edited May 11 '16 at 12:21

answered May 11 '16 at 11:58

Abdulrahman Alsoghayer

16,462
7
51
56

avi.elkharrat · Answer 3 · 2018-04-24T10:29:04.500

11

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>

edited Apr 24 '18 at 10:29

answered Dec 19 '17 at 16:27

avi.elkharrat

6,100
6
41
47

Thx for the missing quote at the end of groups :) – avi.elkharrat Jan 30 '18 at 15:59
1

Just what I needed. Simple and straight-forward – makoshichi Apr 24 '18 at 06:48

score 2 · Answer 4 · answered Feb 29 '16 at 13:11

it's not exact output that you wanted but maybe something like this will do. Parent cmp:

<table>
  <item *ngFor="#i of items" [data]="i"></item>
</table>

Child cmp

import {Component} from 'angular2/core';

@Component({
  selector: `item`,
  inputs: ['data'],
  template: `
    <tr><td>{{data.name}}</td></tr>
    <tr *ngFor="#i of data.items">
      <td><h1>{{i}}</h1></td>
    </tr>
  `
})
export default class Item {


}

score 2 · Answer 5 · answered Aug 13 '20 at 12:49

   <tbody  *ngFor="let defect of items">            
          <tr>
            <td>{{defect.param1}}</td>
            <td>{{defect.param2}}</td>
            <td>{{defect.param3}}</td>                
            <td>{{defect.param4}}</td>
            <td>{{defect.param5}} </td>
            <td>{{defect.param6}}</td>
            <td>{{defect.param7}}</td>           
          </tr>
          <tr>
            <td> <strong> Notes:</strong></td>
            <td colspan="6"> {{defect.param8}}
            </td>`enter code here`
          </tr>          
        </tbody>

Please add some explanation to your answer, such as how it works and solves the problem. — Our Man in Bananas, Aug 13 '20 at 13:18

yitzhak · Answer 6 · 2016-05-15T08:29:04.123

1

Try this. The scope of local variables defined by "template" directive.

<table>
  <template ngFor let-group="$implicit" [ngForOf]="groups">
    <tr>
      <td>
        <h2>{{group.name}}</h2>
      </td>
    </tr>
    <tr *ngFor="let item of group.items">
                <td>{{item}}</td>
            </tr>
  </template>
</table>

edited May 15 '16 at 08:29

answered May 11 '16 at 13:35

yitzhak

19
4

score 0 · Answer 7 · answered Sep 30 '16 at 15:34

I am a fan of keeping logic out of the template as much as possible. I would suggest creating a helper function that returns the data that you care about to the template. For instance:

getItemsForDisplay():String[] {
 return [].concat.apply([],this.groups.map(group => group.items));
};

<tr *ngFor="let item of getItemsForDisplay()"><td>{{item}}</td></tr>

This will let you keep your presentation free of special logic. This also lets you use your datasource "directly".

score 0 · Answer 8 · answered Feb 08 '17 at 22:52

0

This worked for me.

<table>
  <tr>
    <td *ngFor="#group of groups">
       <h1>{{group.name}}</h1>
   </td>
  </tr>
</table>

answered Feb 08 '17 at 22:52

neticous

1
1

This worked for me – Ziggler Nov 21 '17 at 22:28

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

8 Answers8

Linked