Angular2 table rows as component

Question

I am experimenting with angular2 2.0.0-beta.0

I have a table and the line content is generated by angular2 this way:

    <table>         <tr *ngFor="#line of data">             .... content ....         </tr>     </table> 

Now this works and I want to encapsulate the content into a component "table-line".

    <table>         <table-line *ngFor="#line of data" [data]="line">         </table-line>     </table> 

And in the component, the template has the <tr><td> content.

But now the table does no more work. Which means, the content is no longer shown in columns. In the browser, the inspector shows me that the DOM elements look like this:

    <table>         <table-line ...>             <tbody>                 <tr> .... 

How can I make this work?

Answer 1

use existing table elements as selector

The table element doesn't allow <table-line> elements as children and the browser just removes them when it finds them. You can wrap it in a component and still use the allowed <tr> tag. Just use "tr" as selector.

using <template>

<template> should be allowed as well but doesn't yet work in all browsers. Angular2 actually never adds a <template> element to the DOM, but only processes them internally, therefore this can be used in all browsers with Angular2 as well.

Attribute selectors

Another way is to use attribute selectors

@Component({   selector: '[my-tr]',   ... }) 

to be used like

<tr my-tr>