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?

Unclassical

you can look at #55447240 and #34556777 – Largescale

@GrahamJRoy:sir you fixed above issue? – Dudley

The answer by Sam below worked. You need to change the selector in the child component – Unclassical

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]'

Leasia

thank you so much. it's also meant that I look at the selectors in a different way. never really thought of them in that way until you pointed out wrapping the selector with [] – Unclassical

@Sam:sir in my case i have dynamically added td and i have applid above solution but its not working for mecan you please why its not working with td? – Dudley