Custom Component injected into table row

Question

I have a table that is created in one componentA that has several table-row elements in the table. I then have another componentB that just has several table-row elements that will be reused throughout the app in the template code. The issue is that when using componentB inside of the table of componentA the table-row elements are not spanning the entire width of the table and seem to be broken outside of the table.

I have found references to several other similar issues, but they are using dynamic rows based on data that is passed in for each row. My issue is that I have a fixed set of rows that will be used throughout the app. I tried using the following examples:

--- componentA
<table>
 <tr><td>Name</td></tr>
 <tr componentB></tr> --- does not work
</table>

--- componentB --- selector: '[componentB]'
<tr><td>Phone Number</td></tr>
<tr><td>Email</td></tr>

--- componentA
<table>
 <tr><td>Name</td></tr>
 <componentB></componentB> --- does not work
</table>

--- componentB --- selector: 'componentB'
<tr><td>Phone Number</td></tr>
<tr><td>Email</td></tr>

Here is an example stackblitz of exactly the problem: https://stackblitz.com/edit/angular-ydsgaz

The elements in componentB should span the width of the table just like a normal element used in componentA, but they are not. Any help would be great!

ANSWER: either one of the following examples will work for this scenario

• content-projection: https://stackblitz.com/edit/angular-dr6fqs

• template reference (my preferred way): https://stackblitz.com/edit/angular-qgxzhv

Answer 1

Use angular content projection. You just have to add a directive selector to table body. app.component.html

<table>
  <tbody app-table-rows>
    <tr>
      <td>name</td>
      <td>bob</td>
    </tr>
  <tbody>
</table>

and then in table-rows.component.html add ng-content element. Angular will replace this ng-content element with content inside directive host element.

<ng-content></ng-content>
<tr>
  <td>email</td>
  <td>[email protected]</td>
</tr>
...

Working example https://stackblitz.com/edit/angular-dr6fqs