How To Add Row Component In Table In Angular 7?

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', templat

Solution 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 ...>

Solution 2:

As @ConnorsFan mentioned, you need to define your component as an attribute by adding the square brackets to your component's selector, but there is no need to add the 'tr' in front of it, so the following should be fine:

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

Then use it as follows:

<tr app-table-row 
    *ngFor="let item of items"
    [myProp]="item"
    (myEvent)="executeEvent($event)"
    ...>
</tr>