I have a child component that generates the rows of a table. Since Angular2 messes the output with the component-selector which would result in invalid html like <my-child-component> in a table row, I need to get rich of this. The solution in the other question is not suiteable cause I need to access the <tr> element in the child component.
My idea is to use <template> tag with the attribute of my child component:
@Component({
selector: '[childRow]',
template: `
<tr>
<td>Test</td>
</tr>
`
});
In master component
<table>
<thead>
<template childRow></template>
</thead>
</table>
Result in exception
Unhandled Promise rejection: Template parse errors: Components on an embedded template: TimetableRowComponent
Its caused by the <template> tag. Using another element like <div childRow> works fine, like also the component selector <childRow> (in this case of course without sqare brackets in the selector of the child component).
How can I solve this? My goal is as I said to generate valid html. So I don't want to have <childRow>, <div> or any other elements in the output, that are not valid inside an HTML table. This seems to work using <template> like this example:
<template ngFor let-row [ngForOf]="myArray">
<tr>
{{row.memberA}}</td>
</tr>
</template>
But why can't I let Angular 2 render a child-template inside the <template> tag?
