0

In my angular 6 application, I am getting data from store selector which in turn gets data from API using effect, and from a parent, I injecting that data as an async pipe in child component as below:

<chart-data 
[tableData]="data | async">
>

child component implementation :

  public chartData: any[];
  // input setter
 @Input() set tableData(
    value: tableData[];
  ) {
    if (value.length > 0) {
      this.chartData = value;
    }
  }

Child component template

{{tableData | json}}
<section class="chart-container" *ngIf="chartData?.length > 0">
    <div>
     {{chartData| json}}
    </div>
    </section>

If I print JSON response, data is coming before I check the length here but it does not print the data after inside if condition, Is that because I use the same object or do I need to create a copy before I render it to the template?

angularguy
  • 37
  • 9
  • I think you should replace `tableData` with `chartData` in your child component template, or create a getter to retrieve the `chartData` as `tableData`, as in this [answer](https://stackoverflow.com/a/36653734/8712609). – riorudo Apr 28 '22 at 14:48
  • sorry it was a typo i modified the code above, but even it does not work – angularguy Apr 28 '22 at 14:50
  • You should replace all `tableData` with `chartData` in your child component template. – riorudo Apr 28 '22 at 14:56
  • oh sorry that was typo too, I am sorry, but even it does not work – angularguy Apr 28 '22 at 14:58

2 Answers2

0

Hm.. I don't use setters with @Input decorators. Maybe try tapping into the ngOnChanges lifecycle hook instead.

@Input tableData;

ngOnChanges(changes: SimpleChanges): void {
    if (changes.tableData?.length) {
        this.chartData = this.tableData;
    }
}
Bart
  • 19
  • 2
0

The issue is that the object is an array, you need to change the reference of the array in order to retrigger the setter.

Muhamed Karajic
  • 53
  • 1
  • 5