Angular 6 element not defined in component template

Question

I work with Angular 6. I have the following html

    <table class="table table-sm table-bordered table-striped">
        <tr>
          <th></th>
          <th>Name</th>
          <th>Count Prices</th>
          <th>Average Prices</th>
          <th>Total Prices</th><th></th>
        </tr>
        <tr *ngFor="let item of getCategoriesShortName(); let i = index;">

          <paSummaryCategoryDisplay></paSummaryCategoryDisplay> 
        </tr>
    </table>

I want to display each table's td in a component. paSummaryCategoryDisplay is

@Component({
  selector: "paSummaryCategoryDisplay",
  template: ` <td style="vertical-align:middle">
                {{item.summaryCategory.totalPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.countPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.averagePrices}}</td>`
})

I get the error

Identifier 'item' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

How can I set item from the html to the template?

You'll need to pass the item in to the component via [@Input](https://angular.io/api/core/Input). — Phix, Feb 13 '19 at 19:05
Possible duplicate of [Pass variable to custom component](https://stackoverflow.com/questions/42287304/pass-variable-to-custom-component) — , Feb 13 '19 at 19:05
I read this post but I don't understand how to pass the element item from my table html to my template. I think that in html I can't define a input — Carlota, Feb 13 '19 at 19:18

score 0 · Answer 1 · answered Feb 13 '19 at 20:10

in parent component template, pass data to child component by binding property name

 <paSummaryCategoryDisplay  [item]="item"></paSummaryCategoryDisplay>

in child component use input Decorator

@Component({
  selector: "paSummaryCategoryDisplay",
  template: ` <td style="vertical-align:middle">
                {{item.summaryCategory.totalPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.countPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.averagePrices}}</td>`
})

export class SummaryCategoryDisplay {
  @Input() item: any;
}

for ref. check https://angular.io/guide/component-interaction

Angular 6 element not defined in component template

1 Answers1