How to add row component in table in Angular 7?

Question

I use last version of angluar. (7.2.0) I have personal tr component like:

import { Component, OnInit, Input } from '@angular/core';

@Component({
selector: 'app-table-row',
templateUrl: './table-row.component.html',
styleUrls: ['./table-row.component.scss']
})
export class TableRowComponent implements OnInit {
@Input() character: any;
@Input() columns: string[];

constructor() { }

ngOnInit() {
}

}

I want to use this component inside table like:

<table class="mat-elevation-z8">
<tr>
   <th *ngFor="let c of columns">{{c}}</th>
</tr>
<tr app-table-row class="component-style table-row-component" *ngFor="let ch of characters | async" 
   [character]="ch" 
  [columns]="columns">
</tr>

</table>

get errors like:

Can't bind to 'character' since it isn't a known property of 'tr'. ("table-row class="component-style table-row-component" *ngFor="let ch of characters | async" 
       [ERROR ->][character]="ch" 
      [columns]="columns">
  </tr>
"): ng:///AppModule/TableComponent.html@7:7

How to add my component correctly inside table?

Answer 1

Define the component selector as an attribute selector with square brackets:

@Component({
  selector: 'tr[app-table-row]',
  ...
})

so that it can be set as an attribute of the tr element:

<tr app-table-row ...>