0

I've run into this problem a couple of times and could not figure out why this happens.

So, I have the following code in the PARENT HTML:

<section>
  <h1>Top 3 salesperson</h1>
  <h3></h3>
  <table>
    <tr>
      <th>Number</th>
      <th>Person ID</th>
      <th>Name</th>
      <th>Number Of Sold Items</th>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <app-salesperson></app-salesperson>
  </table>
</section>

The salesperson CHILD html contains the same code:

<tr>
  <td>X</td>
  <td>X</td>
  <td>X</td>
  <td>X</td>
</tr>

I just experimented with the code above but check what happens. The code written in the parent follows the structure of the table but the code in the child doesn't. Why is that?:)

https://gyazo.com/571dcba9b06e0ee83cb3ad7407fd1123

marcopolocs
  • 25
  • 3
  • This won't work because Angular wraps the content `....` after compiling and the table structure is broken. (answer from [Ruben Negredo](https://stackoverflow.com/a/61790796/8712609)). [Here](https://stackoverflow.com/questions/34556277/angular2-table-rows-as-component) you can find several solutions to your problem. – riorudo Nov 22 '22 at 10:08

0 Answers0