Angular child component breaks table

Question

I have an angular component that I want to use in a table with an ngFor but it breaks the table layout. My table looks like:

<table class="table table-stripped">
  <thead>
    <th style="width: 30%;">Network</th>
    <th style="width: 10%;">Quantity</th>
    <th style="width: 30%;">Supplier</th>
    <th style="width: 30%;">Conn Type</th>
    <th></th>
  </thead>
  <tbody>
    <tr *ngFor="let prod of opportunity.products; let i = index;">
      <app-product-row [product]="prod"></app-product-row>
    </tr>
  </tbody>
</table>

the child component looks like:

<td style="width: 30%;">
...
</td>
<td  style="width: 10%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td style="width: 30%;">
...
</td>
<td>
...
</td>

but all of the child component s are placed in the first td element because angular is putting in a <app-product-row ...> tag which means the s aren't rendering properly. I have tried putting the app-product-row on within the tr itself but that didn't work either.

How can I get it to render the table properly?

Answer 1

This is a side effect of tables being rigid in structure. You can get around this by using the component as an attribute of a native table element instead of as a component.

<tr app-product-row></tr>

You need to define the component a selector differently as well - you will need to wrap your component html in a table row.

selector: '[app-product-row]'