typescript - Angular2, ng2-chart child rendering before parent -

i working on visualization application angular2 , typescript frontend , spring-boot backend. @ point data coming backend hast displayed in ng2-chart components.

i loading data in parent components ngoninit() function. data pushed 2 arrays work input child component so:

ngoninit() {     this._sqlservice.getcubeerrors().subscribe(       data => {         (var = 0; < data.length; i++) {           this.barlabels.push(data[i]["monthcube"]);           this.bardata[0]["data"].push(data[i]["errors"]);         }       },       err => { this.error = true }     )   } 

and here service:

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

the 2 arrays barlabels , bardata passed on child component this:

<bar-chart [barlabels]="barlabels" [bardata]="bardata" ></bar-chart> 

in child component using them create chart:

    @input() bardata: any[];     @input() barlabels: array<string>;      public barchartdata: any[] = this.bardata;     public barchartlabels: string[] = this.barlabels; 

i tried track data console.log() breakpoints , seems same.

the problem facing is, somehow chart of child component rendered before ngoninit() takes place , data not displayed. searching update function of sort wasn't successful.

i hope might have answer this,

sebastian

@arpit correct - should use ngonchanges instead of ngoninit relies on data being passed through it's @inputs.

so child component similar, have ngonchanges function checks @inputs have been fetched before trying 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 else relies on these arrays being defined.     } } 

here documentation.