update my graph in UI after service returns with JSON

Question

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>

Answer 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.