@Input setter not updating view data

Question

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?

Answer 1

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;
    }
}