Bootstrap Table in Angular 12

Question

i create a table with bootstrap; im using angular 12, when i use only one component with table head and body works fine, when i create another component with table body, it gets all messed up. i have tried different aproachs but everytime same thing. here is my head component

   <table class="table table-hover table-borderless">
     <thead class="tablehead">
       <tr>
         <th class="centeralign">RANKING</th>
         <th class="leftalign">TITTLE</th>
         <th class="leftalign">YEAR</th>
         <th class="leftalign">REVENUE</th>
         <th></th>
       </tr>
     </thead>
     <tbody class="tablebody" *ngFor="let movie of movieList; index as i">
       <app-movies-item [movie]="movie"></app-movies-item>
     </tbody>
   </table> 

and my body.component.html

<tr>
  <td class="centeralign">
    {{ movie.rank }}
  </td>
  <td class="leftalign">{{ movie.title }}</td>
  <td class="leftalign">{{ movie.year }}</td>
  <td class="leftalign">$ {{ movie.revenue }}</td>
  <td>
    <img
      src="../../assets/imgs/eye.svg"
      (click)="openModal(content, movie, modal)"
    />
  </td>
</tr>

any idea why this happens?

thank you

Answer 1

this strange behavior happens because when you create a new component and use it, you will insert a new node in the dom. In your case inside the body there is something like this:

<tbody>
  <app-body>
    <tr>
      <td>...</td>
    </td>
  </app-body>
</tbody>

so the table doesn't recognize that there is an element inside its body before find a row and a cell. If you want do something like that, you better use "directives" and manage them with @ContentChild to obtain something like:

<app-table>
  <app-row *ngFor="let movie of movieList" [movie]="movie">
  </app-row>
</app-table>

In this little fragment only the "app-table", while the "app-row" is a directive managed by the parent.