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 after getting API response. So, I need to sync the chart according with the API response every time it gets changed on the parent component, hence, the OnChange Lifecyle. But unfortunately, I am not able to get this to work properly. I tried with setting a dummy input field with basic number type and increment it but in vain. Here's my 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 as the title indicates only fires once when the component initializes with undefined values.

Are you sure that your ChartData is resolving in the Parent component? — joshrathke
– joshrathke, Commented Jan 15, 2018 at 14:17
Yes, I am able to log the API response to the console. However, I noticed that the triggerChartData doesn't increment. It logs NaN — Mehdi Benmoha
– Mehdi Benmoha, Commented Jan 15, 2018 at 14:21
Try logging out the Input properties to your DOM instead using handlebars. {{ chartData | json }} within the child component. Objects are tough on change detection, because an Input will only pass the object as Reference, meaning change detection won't detect changes beyond the initial reference to the object within the parent component being defined. — joshrathke
– joshrathke, Commented Jan 15, 2018 at 14:26
In terms of the triggerChartData++ rendering NaN, trying initializing the property with a Number value: triggerChartData: number = 0. Then using ++ should work. — joshrathke
– joshrathke, Commented Jan 15, 2018 at 14:30
Read this stackoverflow.com/questions/38571812/… - Especially the edit "EDIT 2017-07-25:..." — Hoang Duc Nguyen
– Hoang Duc Nguyen, Commented Jan 15, 2018 at 14:32

Mehdi Benmoha · Accepted Answer · 2018-03-01 11:23:08Z

13

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

edited Mar 1, 2018 at 11:23

answered Jan 16, 2018 at 9:35

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hoang Duc Nguyen Over a year ago

Nice, very thoughtful you are :)

Zahid Rasheed Over a year ago

Wow!! After spending many hours, this resolved the issue!! Thanks :)

Suraj Rao · Accepted Answer · 2018-11-09 12:08:13Z

0

you must use changeDetectorRef

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

edited Nov 9, 2018 at 12:08

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Nov 9, 2018 at 12:06

zinderud

632 bronze badges

Collectives™ on Stack Overflow

Angular 5 ngOnChanges fires only once in child component

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related