title: How to use Angular2 templates with *ngFor to create a table out of nested arrays?
body: <p>Given the following array in component property <code>groups</code>:</p>
  
  <pre><code>[
     {
       "name": "pencils",
       "items": ["red pencil","blue pencil","yellow pencil"]
     },
     {
       "name": "rubbers",
       "items": ["big rubber","small rubber"]
     },
  ]
  </code></pre>
  
  <p>How to create a html table with all items, each in one row? The expected HTML result:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;&lt;td&gt;&lt;h1&gt;pencils&lt;/h1&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;red pencil&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;blue pencil&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;yellow pencil&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;&lt;h1&gt;rubbers&lt;/h1&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;big rubber&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;small rubber&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The first level is easy:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr *ngFor="#group of groups"&gt;
          &lt;td&gt;&lt;h1&gt;{{group.name}}&lt;/h1&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But now I have to iterate <code>#item of group</code>. The problem is that I need the new <code>&lt;tr&gt;</code> elements <strong>after</strong> the <code>&lt;/tr&gt;</code> element which defines <code>group</code>, <strong>not inside</strong>.</p>
  
  <p>Is there any solution for this kind of problems in Angular2 templating? I would expect some special tag which I could use instead of <code>&lt;tr&gt;</code> which is not written into the dom. Something similar to facets and fragments in JSF.</p>