Angular2 don't render ChildComponent selector

Question

I'm trying to display data in an HTML table. Because the <tr> will be repeated many times and it has some logic I wanted to extract that to it's own (child)component.

But rendering a child component within the <tbody> allso renders the component as an HTML attribute. My template looks like:

<tbody>
    <custom-row [some-data]="data"></custom-row>
</tbody>

But when this is rendered, it will look like:

<tbody>
    <custom-row>
        <tr><td></td></tr>
    </custom-row>
</tbody>

Is it possible to not render te "custom-row" element in the DOM?

Answer 1

That's not an Angular issue. The browser doesn't render <custom-row> inside <table> because this tag is invalid there.

Change the selector of your component to selector: '[custom-row]' and use it like

<tbody>
    <tr custom-row [some-data]="data"></tr>
</tbody>