I am struggling with syncing a child component containing complex input (such as chart data) with the API response received in the parent component in Angular 5. I am using the @Input() decorator to pass the chart data from the parent to the child component, and I need the chart to update every time the API response changes. To achieve this, I am trying to use the ngOnChanges Lifecycle hook but encountering issues. I even attempted using a dummy input field of basic number type and incrementing it, but it did not work as expected. Below is my code implementation:
Child chart component:
export class ChartComponent implements OnInit, OnChanges {
@Input() chartData;
@Input() triggerChart;
ngOnChanges(changes: SimpleChanges) {
console.log(changes);
}
}
Parent component html:
<app-chart [chartData]="chartData" [triggerChart]="triggerChartData"></app-chart>
<input [(ngModel)]="triggerChartData" type="hidden">
Parent component:
this.chartService.getChartData(params).subscribe(res => {
this.chartData = res;
this.triggerChartData++;
});
PS: The ngOnChanges only triggers once when the component initializes with undefined values.