Custom Angular component does not get displayed as TR in the template

Question

I am redesigning the table and I wanted to introduce my own custom components instead of the standard TR element. The table works as expected and looks as follows.

<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 replace the regular TR and switched the grid layout to the next.

<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 layout of the new component is very rudimentary, as shown below.

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

, . , , TD ( , devtools), . , . . , , , , ROW (, TR). , TD.

, , , ?

Answer 1

, , row tr table.

:

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

:

<tr row></tr>

, tr tr, , : row.

( . li. <li my-element> .)