In Angular2+, how can I replace a with my own component without interfering with the dom structure/css

Question

Consider the following table snippet with a rows of people and their result on a test:

<tr>
  <td>John Doe</td>
  <td>18</td>
</tr>
<tr>
  <td>Jane Dober</td>
  <td>28</td>
</tr>
<my-own-tr-component></my-own-tr-component>

In the end of the table above, I want to add a final <tr>, which will be my custom component, which will be reused elsewhere.

The problem is that my custom component inserts a dom element in a table which is not a <tr> which breaks the DOM, styling etc.

How can I make Angular NOT insert its own host element and just display the <tr> from my custom component?

I don't want to use attribute selectors since it seems like a hack, and is against Angulars style guide document.

What about https://stackoverflow.com/a/34556489/1168786 – ssuperczynski Jul 21 '17 at 10:54 — ssuperczynski, Jul 21 '17 at 10:54
Try `:host { display: table-row; }`. – Jul 21 '17 at 11:04 — , Jul 21 '17 at 11:04
@torazaburo you should post this as an answer – smnbbrv Jul 21 '17 at 11:54 — smnbbrv, Jul 21 '17 at 11:54

score 1 · Accepted Answer · answered Jul 21 '17 at 12:14

Give the component the table-row display property:

:host { display: table-row; }

That will make it behave for all practical purposes like <tr>. To be precise, it is the display: table-row property defined in the user agent style sheet that makes <tr> function as a table row.

In Angular2+, how can I replace a with my own component without interfering with the dom structure/css

1 Answers1