title: Angular2 Component which renders 2 tr elements in a loop
body: <p>I need to write a component that has a template that looks like this:</p>
  
  <pre><code>&lt;tr&gt;...&lt;/tr&gt;
  &lt;tr&gt;...&lt;/tr&gt;
  </code></pre>
  
  <p>This must be used with *ngFor to create a table.
  The selector for the component is <code>spot-row</code>.
  The component has one input variable named <code>spot</code>.</p>
  
  <p>The desired output must look like this:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;...&lt;/tr&gt;
  &lt;tr&gt;...&lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>I tried the following:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;spot-row *ngFor="let spot of spots" [spot]="spot"&gt;&lt;/spot-row&gt;
  &lt;/tbody&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>But this produced</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;spot-row&gt;
  &lt;tr&gt;...&lt;/tr&gt;
  &lt;tr&gt;...&lt;/tr&gt;
  &lt;/spot-row&gt;
  &lt;/tbody&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>Then I tried switching the component selector to <code>[spot-row]</code> and using <code>ng-container</code></p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;ng-container spot-row *ngFor="let spot of spots" [spot]="spot"&gt;&lt;/ng-container&gt;
  &lt;/tbody&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>But this produced an error</p>
  
  <blockquote>
    <p>Error: Error in ./SpotRowComponent class SpotRowComponent - inline
    template:0:0 caused by: Failed to execute 'appendChild' on 'Node':
    This node type does not support this method</p>
  </blockquote>
  
  <p>Then I tried <code>template</code></p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;template spot-row *ngFor="let spot of spots" [spot]="spot"&gt;&lt;/template&gt;
  &lt;/tbody&gt;
  &lt;table&gt;
  </code></pre>
  
  <p>But this also gives me an error</p>
  
  <blockquote>
    <p>Error: Template parse errors: Components on an embedded template:
    SpotRowComponent ("     [ERROR ->]   
    ")</p>
  </blockquote>
  
  <p>I searched StackOverflow and found</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/34556277/angular2-table-rows-as-component">Angular2 table rows as component</a>
  which is only about one tr</li>
  <li><a href="https://stackoverflow.com/questions/38716105/angular2-render-a-component-without-its-wrapping-tag">Angular2 : render a component without its wrapping tag</a>
  where the question asks about tr elements and the accepted answer is
  about td elements</li>
  <li><a href="https://stackoverflow.com/questions/34588933/how-to-remove-replace-the-angular2-components-selector-tag-from-html">How to remove/replace the angular2 component&#39;s selector tag from HTML</a>
  which will render an additional div element</li>
  </ul>