Handling select event from Google Charts in Angula

I am using Angular v2 (2.0.0-beta-1) and displaying a simple chart using Google Charts.

import {Component, View} from "angular2/core";
import {Http, HTTP_PROVIDERS} from "angular2/http";
import {OnInit, OnDestroy} from 'angular2/core';

declare let io: any;
declare let google: any;

@Component({
  selector:'default',
  viewProviders: [HTTP_PROVIDERS]
})

@View({
  templateUrl: 'app/default/default.html'
})

export class DefaultPage implements OnInit, OnDestroy {
  charttitle: string;
  data: any;
  options: any;
  timerToken: any;
  chart: any;
  socket: any;

  constructor(http: Http) {
  }

  ngOnInit() {
    console.log("onInit");
    this.charttitle = "Sample Graph using live data";

    this.options = {
      title: "My Daily Activities",
      is3D: true
    };

    this.socket = io();
    this.socket.on("data_updated", (msg) => {
      this.data = new google.visualization.DataTable();
      this.data.addColumn('string', 'Task');
      this.data.addColumn('number', 'Hours per Day');

      this.data.addRows(5);

      let data = JSON.parse(msg).activityData;

      for (let i = 0; i < data.length; i++) {
        let act = data[i];
        this.data.setCell(i, 0, act.act);
        this.data.setCell(i, 1, act.value);
      }

      this.chart.draw(this.data, this.options);
    });

    this.chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    google.visualization.events.addListener(this.chart, 'select', this.mySelectHandler);
  }

  mySelectHandler() {
    console.trace();
    console.log("Chart: " + this);
    //let selectedItem = this.chart.getSelection()[0];
    /*if (selectedItem) {
      let value = this.data.getValue(selectedItem.row, 0);
      console.log("The user selected: " + value);
    }*/
  }

  ngOnDestroy() {
    console.log("onDestroy");
    this.socket.disconnect();
  }
}

The problem I have is the following line.

google.visualization.events.addListener(this.chart, 'select', this.mySelectHandler);

The event is registered is when an element on the pie chart is selected the actual event handler is fired. But all the Angular JS 2 scope variables referenced by this aren't in scope. It's as if the Google Chart visualization library is running in its own scope.

I know that Angular JS has the Angular-Charts directive but we cannot use that as the company wants to use Angular v2 only.

Is there a way I can get the Google Charts API to 'bubble' an event to the event handler running on the scope of the Angular component.

If you want that your mySelectHandler takes part within the Angular2 context / change detection, you could leverage NgZone, as described below. This way, the changes you make in this function will update the view accordingly.

import {NgZone} from 'angular2/core';

export class DefaultPage implements OnInit, OnDestroy {      
  constructor(private ngZone:NgZone) {

  }

  ngOnInit() 
    this.chart = new google.visualization.PieChart(
                      document.getElementById('chart_div'));
    google.visualization.events.addListener(
       this.chart, 'select', () => {
         this.ngZone.run(() => {
           this.mySelectHandler();
         });
       }
    );
  }
}

Hope that I correctly understood your question. Thierry