Angular2 Component which renders 2 tr elements in a loop

Question

I need to write a component that has a template that looks like this:

<tr>...</tr>
<tr>...</tr>

This must be used with *ngFor to create a table. The selector for the component is spot-row. The component has one input variable named spot.

The desired output must look like this:

<table>
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<table>

I tried the following:

<table>
<tbody>
<spot-row *ngFor="let spot of spots" [spot]="spot"></spot-row>
</tbody>
<table>

But this produced

<table>
<tbody>
<spot-row>
<tr>...</tr>
<tr>...</tr>
</spot-row>
</tbody>
<table>

Then I tried switching the component selector to [spot-row] and using ng-container

<table>
<tbody>
<ng-container spot-row *ngFor="let spot of spots" [spot]="spot"></ng-container>
</tbody>
<table>

But this produced an error

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

Then I tried template

<table>
<tbody>
<template spot-row *ngFor="let spot of spots" [spot]="spot"></template>
</tbody>
<table>

But this also gives me an error

Error: Template parse errors: Components on an embedded template: SpotRowComponent (" [ERROR ->] ")

I searched StackOverflow and found

• Angular2 table rows as component which is only about one tr
• Angular2 : render a component without its wrapping tag where the question asks about tr elements and the accepted answer is about td elements
• How to remove/replace the angular2 component's selector tag from HTML which will render an additional div element

Answer 1

Suggestion as per comment, not tested.

Component selector: [spot-row]

Component template:

<tr>...</tr>
<tr>...</tr>

HTML:

<table>
   <tbody *ngFor="let spot of spots" spot-row [spot]="spot"></tbody>
<table>

This should produce:

<table>
   <tbody>
     <tr>...</tr>
     <tr>...</tr>
   </tbody>
   <tbody>
     <tr>...</tr>
     <tr>...</tr>
   </tbody>
   ...
</table>

Which is valid (multiple <tbody> in <table>).