Angular2, ng2-chart child rendering before parent

Question

I am currently working on a visualization application with Angular2 and TypeScript for the frontend and Spring-Boot for the backend. Now I am at the point where the data coming from the backend hast to be displayed in my ng2-chart components.

I am loading the data in my parent components ngOnInit() function. The data is pushed to two arrays which work as input for my child component like so:

ngOnInit() {
    this._sqlService.getCubeErrors().subscribe(
      data => {
        for (var i = 0; i < data.length; i++) {
          this.barLabels.push(data[i]["monthCube"]);
          this.barData[0]["data"].push(data[i]["errors"]);
        }
      },
      err => { this.error = true }
    )
  }

and here my service:

getCubeErrors() {
    return this.http.get('/rest/cubeerrors').map((res: Response) => res.json());
  }

The two arrays barLabels and barData are passed on to the child component like this:

<bar-chart [barLabels]="barLabels" [barData]="barData" ></bar-chart>

In my child component i am using them to create a chart:

    @Input() barData: any[];
    @Input() barLabels: Array<string>;

    public barChartData: any[] = this.barData;
    public barChartLabels: string[] = this.barLabels;

I tried to track the data with some console.log() breakpoints and it seems that they are the same.

The problem I am facing is, that somehow the chart of the child component is rendered before the ngOnInit() takes place and so my data is not displayed. I was searching for a update function of some sort but wasn't successful.

I hope someone might have an answer for this,

Sebastian

ngOnChange would be called when impl of a conp changes but for that to function reference of array has to be changed. It won't detect pushing element in an array — Arpit Agarwal, Aug 01 '16 at 12:47
I tried ngOnChanges() in my chart component for test purposes and it got fired so i think it did detect the changes. — CodeDonkey, Aug 01 '16 at 12:53

score 0 · Answer 1 · answered Aug 01 '16 at 14:39

0

You should use ngOnChange to update the data for chart component.

answered Aug 01 '16 at 14:39

Arpit Agarwal

3,993
24
30

Thanks for your answer, could you give me an example how ngOnChange works? – CodeDonkey Aug 02 '16 at 07:15

score 0 · Answer 2 · answered Aug 02 '16 at 07:30

0

I figured it out now, i missed the changeDetection: ChangeDetectionStrategy.OnPush, implementation in my child component.

Thanks for all the answers!

answered Aug 02 '16 at 07:30

CodeDonkey

65
1
9

score 0 · Accepted Answer · answered Aug 02 '16 at 08:25

@Arpit is correct - you should use ngOnChanges instead of ngOnInit for anything that relies on the data being passed to it through it's @Inputs.

So your child component would be very similar, just it would have an ngOnChanges function which checks that the @Inputs have been fetched before trying to use them.

@Input() barData: any[];
@Input() barLabels: Array<string>;

public barChartData: any[];
public barChartLabels: string[];

ngOnChanges(){
    if(this.barData && this.barLabels){
        this.barChartData = this.barData;
        this.barChartLabels = this.barLabels;

        //Do anything else that relies on these arrays being defined.
    }
}

Here is the documentation.

Angular2, ng2-chart child rendering before parent

3 Answers3