Create Rows in a HTML Table by Angular 2 component

Question

I have a component called "groups-list" which render a list of group, but I would like to have each group element of that list, as a different component. So, I would have a group-list component rendering the wrapper (in this case a table) and a "group-list-element" rendering every row.

• groups-list HTML template:

  <table class="table">
     <thead>
        ...
     </thead>
     <tbody>
        <tr *ngFor="let group of groups">
           <group-list-item-component [group]="group"></group-list-item-component>
        </tr>
     </tbody>
   </table>
  

• group-list-element HTML template:

  <td class="body-element"><a class="element">{{group.name}}</a></td>
  <td class="body-element"><a class="element">{{group.users}}</a></td>
  <td class="body-element"><a class="element">{{group.allocation}}</a></td>
  ...
  

But the problem is coming up when the browser render the following code:

<table class="table">
   <thead>
      ...
   </thead>
   <tbody>
      <tr *ngFor="let group of groups">
         <group-list-item-component [group]="group"> // * This element breaks the table *
              <td class="body-element"><a class="element">{{group.name}}</a></td>
              <td class="body-element"><a class="element">{{group.users}}</a></td>
              <td class="body-element"><a class="element">{{group.allocation}}</a></td>
         </group-list-item-component>
      </tr>
   </tbody>
 </table>

Why? I suppose that TABLE does expect one of the "valid" elements that you can put inside, such as tr, th, thead, tbody, tfooter...

How to solve it keeping the components I mentioned before?

Thanks in advance!