google is not defined in Angular Project using google-charts

Question

i using google-charts in my angular project. i need to format the values into my chart and i have found this documentation: https://github.com/FERNman/angular-google-charts#formatters

my code is this: component.html

<google-chart  #grafico
            [type]="type" 
            [data]="dataArea" 
            [options]="options"
            [formatters]="myFormatters"
            style="width: 100%;">
         </google-chart>

component.ts

type = 'AreaChart';
      dataArea = [];
      options = {
        isStacked: true,
        pointSize: 4,
        chartArea: { left: 40, top: '5%', width: '85%', height: '80%' },
        legend: { position: 'none' },
        height: 380,
        colors: ['rgb(0, 0, 128)', 'grey', 'orange'],
        vAxis: {format: 'short'}
      };

  myFormatters = [
    {
      formatter: new google.visualization.NumberFormat({ decimalSymbol: '.',
      groupingSymbol: ',' }),
      colIndex: 1
    },
    {
      formatter: new google.visualization.NumberFormat({ decimalSymbol: ',',
      groupingSymbol: '.' }),
      colIndex: 5
    }
  ];

but the console give to me this error:

core.js:6210 ERROR Error: Uncaught (in promise): ReferenceError: google is not defined ReferenceError: google is not defined at new OutputFrtbsaReportingComponent (output-frtbsa-reporting.component.ts:38) )

can u help me pls?

Answer 1

i have fix the problem in this way:

1: i have add "private loaderService: ScriptLoaderService" into costructor

2: into onInit

this.loaderService.loadChartPackages().subscribe(() => {
      // Start creating your chart now
      this.myFormatters = [
        {
          formatter: new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }),
          colIndex: 1
        },
        {
          formatter: new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }),
          colIndex: 2
        },
        {
          formatter: new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }),
          colIndex: 3
        }
      ];
    });