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?

Martin Parenteau · Accepted Answer · 2019-04-10 21:12:02Z

18

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

edited Apr 10, 2019 at 21:12

answered Apr 1, 2019 at 0:46

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user504909 Over a year ago

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

Martin Parenteau Over a year ago

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

Kapil Soni Over a year ago

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

Flavien Volken · Accepted Answer · 2023-02-13 11:12:42Z

4

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

answered Feb 13, 2023 at 11:12

Flavien Volken

21.5k14 gold badges116 silver badges147 bronze badges

1 Comment

i3asm Over a year ago

This fits my problem perfectly. thank you!

Stacked · Accepted Answer · 2021-07-15 15:04:08Z

0

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>

answered Jul 15, 2021 at 15:04

Stacked

7,3767 gold badges63 silver badges76 bronze badges

1 Comment

Martin Parenteau Over a year ago

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.

Collectives™ on Stack Overflow

How to add row component in table in Angular 7?

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related