update my graph in UI after service returns with JSON

I have a service that returns an object successfully from my API. By the time this is returned however I have already rendered my custom graph component with their default values.

I can pull the value of 'title' for example from the object, see \\'works!' comment

How can I update my graph component's 'chart1Title'?

import { Component } from '@angular/core'; import { HttpWebServiceService1 } from './http-web-service-service'; import { Chart } from './bar-chart-demo/chartModel'; @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.css'],   providers: [HttpWebServiceService1] }) export class AppComponent {     charts: Chart[];     thisChartObject: Array<Object>;     thisChartsTitle: string;     constructor(HttpWebServiceService1: HttpWebServiceService1){     HttpWebServiceService1.getHTTP()       .subscribe(         charts =>          {           console.log(charts); //works           console.log(charts['charts'][0]['title']); //works this.chart1Title = charts['charts'][0]['title']; //does not work         },         error => console.error('Error: ' + error),         () => console.log(charts[0])       );    }    //Draw chart with some default values   chart1Data:any[] = [     {data: [3, 1, 1], type: 'bar'}   ];   chart1Label:string[] = [Label1', 'Label2', 'Label3'];   chart1Type='bar';   chart1Title = 'my graph title'; } 

My HTML

<!-- Header --> <div class="flex-container-header"      fxLayout="row"      fxLayoutAlign="space-between center">   <div class="flex-item">      <img src="../../assets/img/my_logo.png" >   </div>   <div class="flex-item" fxFlex=10>     <img src="../../assets/img/my_logo1.png" ng-href="www.site.ie" >   </div> </div>   <!--Headline Chart--> <div *ngIf="!isLoading">   <div class="flex-container"       fxLayout="row"       fxLayout.md="column"      fxLayout.sm="column"      fxLayout.xs="column"      fxLayoutAlign="center">   <div class="flex-item" fxFlex=60 fxFlex.md=100 fxFlex.sm=100 fxFlex.xs=100> <app-bar-chart-demo [chartLabel]="chart1Label" [chartData]="chart1Data" [chartType]="chart1Type" [(chartTitle)]="chart1Title"></app-bar-chart-demo>  </div> </div> </div>     <p></p> </div> 

2 Answers

Answers 1

I have same issue in my work, for me, I use a flag: isLoading

    export class AppComponent {         charts: Chart[];         thisChartObject: Array<Object>;         thisChartsTitle: string;          isLoading: boolean;         constructor(HttpWebServiceService1: HttpWebServiceService1){         this.isLoading = true;         HttpWebServiceService1.getHTTP()           .subscribe(             charts =>              {               console.log(charts); //works               console.log(charts['charts'][0]['title']); //works               this.updateData(charts);             },             error => console.error('Error: ' + error)           );        }        public updateData(charts: any) {         this.chart1Title = charts['charts'][0]['title'];         this.isLoading = false;       }     } 

in your *.component.html:

    <div *ngIf="!isLoading">       <your-chart></your-chart>     </div> 

Hope it helps.

Answers 2

You need the object before rendering the page so I suggest using a resolve :

Thoughtram blog Resolve example

Resolve documentation

If this doesn't fix the issue you are having , I would suggest implementing a lifecycle hook.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati