Refresh my graph in UI after returning service using JSON

Question

I have a service that successfully returns an object from my API. By the time this returns, I have already provided my own graph component with default values.

I can deduce the value "title", for example, from an object, see \\'works!' a comment

How to update the graphic component '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> 

Answer 1

I have the same problem in my work, for me I use the 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 *.component.html :

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

Hope this helps.