Can't bind to 'character' since it isn't a known property of 'tr'

Question

Import, variable declaration done. Still throws error. Also read older issues on SO.

app.module.ts:

import { HotelTableComponent } from './hotel-table/hotel-table.component';
import { HotelTableRowComponent } from './hotel-table-row/hotel-table-row.component';

@NgModule({
  declarations: [
    AppComponent,
    HotelTableComponent,
    HotelTableRowComponent
  ],

hotel-table-row.component.ts:

@Component({
  selector: 'app-hotel-table-row',
  .....

export class HotelTableRowComponent implements OnInit {

  @Input() character: any;
  @Input() columns: string[];

hotel-table.component.html:

  <table>
    <tr>
      <th *ngFor="let c of columns">{{c}}</th>
    </tr>

    <tr *ngFor="let ch of characters | async" 
    app-hotel-table-row
    [character]="ch" 
    [columns]="columns">
    </tr>

  </table>

Console:

compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'character' since it isn't a known property of 'tr'. ("
    <tr *ngFor="let ch of characters | async" 
    app-hotel-table-row
    [ERROR ->][character]="ch" 
    [columns]="columns">
    </tr>
"): ng:///AppModule/HotelTableComponent.html@7:4
Can't bind to 'columns' since it isn't a known property of 'tr'. ("
    app-hotel-table-row
    [character]="ch" 
    [ERROR ->][columns]="columns">
    </tr>

"): ng:///AppModule/HotelTableComponent.html@8:4

instead of your current selector. It should be `selector: '[app-hotel-table-row]'` — Yevgeniy.Chernobrivets, Jun 02 '18 at 09:27
IT WorKED! But my lint cries for using squate braces. Why do i need to use it in this case? — Bista, Jun 02 '18 at 09:32
Because component selector is actual CSS selector and in CSS to select attribute by name you have to put it in square brackets. — Yevgeniy.Chernobrivets, Jun 02 '18 at 09:32

Yevgeniy.Chernobrivets · Accepted Answer · 2018-06-02T09:36:16.303

2

In order to bind your component to an attribute you need to put component name in square brackets because component selector is actual CSS selector and in CSS to select attribute by name you have to put it in square brackets. Try this

selector: '[app-hotel-table-row]'

Check out this post for more details.

edited Jun 02 '18 at 09:36

answered Jun 02 '18 at 09:31

Yevgeniy.Chernobrivets

3,194
2
12
14

Thanks. It works. Please include you last comment in the answer. It will be helpful for others – Bista Jun 02 '18 at 09:34

Can't bind to 'character' since it isn't a known property of 'tr'

1 Answers1