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?

Brickle

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

Hesta

Thanks. It works but according to angular.io/guide/styleguide#style-05-03. it is wrong style for eslint – Brickle

As said in the style guide, "There are a few cases where you give a component an attribute, such as when you want to augment a built-in element." That is exactly your case: you are augmenting the tr element (instead of adding a custom element to the DOM). – Hesta

@ConnorsFan:sir can you tell me how to use with td? – Maley

Answer 2

The approach of selecting an attribute 'tr[app-table-row]' is fine when you want to generate only one row at a time, but it could become cumbersome for many rows, for instance if you need to use multiple row span

In this case, just use a regular selector 'app-table-rows' and set the component's host display to contents.

:host {
  display: contents;
}

demo

Nemesis

This fits my problem perfectly. thank you! – Forrestforrester

Answer 3

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>

Codicil

Adding tr in front of the square brackets limits the use of the component to tr elements. It is probably what we want if the component contains td and th elements. – Hesta