title: Highcharts events broken: Type Error Cannot read property 'call' of undefined
body: <p>I am using Highcharts 6 in Node 8, Angular 6, with the highcharts-angular wrapper, and am using a dynamically defined declarative setup.  </p>
  
  <p>Charts are rendered like this in template:</p>
  
  <pre><code>&lt;highcharts-chart *ngFor="let chart of chartUtilities.charts; let i = index"
      [Highcharts]="chartUtilities.Highcharts"
      [constructorType]="'chart'"
      [options]="chartUtilities.charts[i].hcOptions"
      [callbackFunction]="chartUtilities.charts[i].hcCallback"
      [(update)]="chartUtilities.updateTrend"
      class="chart"
      id="trendChart{{i}}"
  &gt;&lt;/highcharts-chart&gt;
  </code></pre>
  
  <p>chartUtilities is a service that contains the declarative template, and functions that dynamically update the declared objects at runtime.</p>
  
  <p>When the charting is updated, the driving code in the component copies the template, n-times, which results in n-charts getting rendered.  The component then calls the service function to draw the series and update options.  </p>
  
  <pre><code>    //Create new charts based on the template
      let new_charts = [];
      for (let _i=0; _i&lt;=num_items-1; _i++) {
        let this_copy = JSON.parse(JSON.stringify(this.chartUtilities.chartTemplate));
        new_charts.push(this_copy);
      }
      this.chartUtilities.charts = new_charts;
      this.chartSelected(builds data arrays, then calls service function to update template options and assign data arrays)
  </code></pre>
  
  <p>Mostly, this all works great.  I can use dynamic themes as an observable too, which is sweet.  </p>
  
  <p>The only part I can't figure out, is how to get events and custom functions working properly.  Currently, when I assign an events callback, like a custom button to fullscreen, I get an error at runtime when clicked, ie:</p>
  
  <pre><code>exporting: { buttons: { customButton: { text: null, symbol: 'square', onclick: this.toggleFullScreenTrend } } },
  </code></pre>
  
  <p>Runtime error:</p>
  
  <pre><code>core.js:1673 ERROR TypeError: Cannot read property 'call' of undefined
  at SVGGElement.__zone_symbol__ON_PROPERTYclick (highcharts.js:75)
  at SVGGElement.wrapFn (zone.js:1332)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
  at Object.onInvokeTask (core.js:3811)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
  at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
  at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
  at invokeTask (zone.js:1744)
  at SVGGElement.globalZoneAwareCallback (zone.js:1770)
  </code></pre>
  
  <p>Other function handle assignments like formatters and callbacks are also broken.  It doesn't matter if I assign a function inline, or as a member, same result.</p>
  
  <p>The only hint I have is that if I statically define each or any charts ahead of time, the function handle assignments work correctly, but this is undesired of course, since dynamic!</p>
  
  <p>Any ideas on how to fix?  Really close to having a very sweet dynamic setup if I can get past this.</p>
  
  <p>Here is a codesandbox that reproduces the issue:  <a href="http://codesandbox.io/s/angular-mv59c" rel="nofollow noreferrer">http://codesandbox.io/s/angular-mv59c</a></p>
  
  <p>I was expecting dynamically assigned functions in declarative creation to work correctly.</p>
  
  <p>Thanks!</p>