Custom Angular component doesn't get rendered as TR in the template

Question

I'm redesigning a table and I wanted to introduce my own, custom components instead of the default TR element. The table works as supposed to and looks like this.

<table>
  <thead>
    <tr><th *ngFor="let column of this.columns">{{column.title}}</th></tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of this.rows"></tr>
  </tbody>
</table>

Then, I introduced my own component to substitute the usual TR and switched the markup of the grid to the following.

<table>
  <thead>
    <tr><th *ngFor="let column of this.columns">{{column.title}}</th></tr>
  </thead>
  <tbody>
    <row *ngFor="let row of this.rows" [value]="row" [formats]="columns"></row>
  </tbody>
</table>

The markup of the new component is very rudimentary as shown below.

<td *ngFor="let format of formats">
  {{value[format.id]}}
</td>

It works, kind of. I.e. I can see the values but al the TDs generated (which I can confirm checking the devtools) get rendered in the first column of the table. So the data binding works. The generation of the markup works. The only thing that fails is that the stupid browser doesn't get that ROW is supposed to the a row (like TR is). It thinks that it can be rendered as a single TD.

How do I tell the stupid browser to do what I meant, not what I said?

Answer 1

I think this is because it doesn't recognize row as a tr and therefore it doesn't render properly the table.

Try using your component like this:

@Component({ 
   selector: '[row]',
   template: `
   <td *ngFor="let format of formats">
      {{value[format.id]}}
   </td>
   ` 
})

And then in your table:

<tr row></tr>

This way, everyone recognizes the tr as a tr but it will behave like you want to: using your row component.

(I had the same problem with a custom menu element. It didn't recognize the li element. Using <li my-element> fixed the issue.)