Angular 5 ngOnChanges fires only once in child component

Question

I have a child component that contains complex input (some chart data). I am sending this chart data from the parent component through the @Input() decorator in Angular 5 af

Answer 1

you must use changeDetectorRef

this.cd.markForCheck();
if (!this.cd['destroyed']) {
    this.cd.detectChanges();
}

Answer 2

Thanks to @HoangDucNguyen, here's the working code:

this.chartService.getChartData(params).subscribe(res => {
  this.chartData = res;
  this.changeDetectorRef.detectChanges();
});

Of course you will need to import the ChangeDetectorRef class from @angular/core and inject it in your constructor.

Explanation:
When variables are changed outside of the angular context (in here: it's the rxJs context), Angular isn't able to detect changes on the variables. So, you need to manually fire the detect changes angular method.

Official doc: https://angular.io/api/core/ChangeDetectorRef