Angular2 Table Row component on Chrome displays in single column

Question

Versions in use:

• Angular 2.0.1
• angular-cli 1.0.0-beta.17

I have a page that is broken into 3 components. The page outline, a table whi

Answer 1

You can't have a <row-component> inside a <tbody> because that is not a valid child for <tbody>.

You can change the selector of RowComponent to [rowComponent] and then use it like

<tr rowComponent *ngFor="let qlines of qlineModel" 
                        [qline]="qlines">

Answer 2

Using a selector: 'tr[row-component]' in RowComponent would allow you to render

<table>
    <thead><!-- headers go here --></thead>
    <tbody>
        <tr row-component *ngFor="let qlines of qlineModel" [qline]="qlines"></tr>
    </tbody>
</table>

This is rendered correctly both on Chrome and IE.