Handling select event from Google Charts in Angular JS 2 -

i using angular js 2 2.0.0-beta-1 , displaying simple chart using google charts.

import {component, view} "angular2/core"; import {http, http_providers} "angular2/http"; import {oninit, ondestroy} '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;        (let = 0; < 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 have following line.

google.visualization.events.addlistener(this.chart, 'select', this.myselecthandler);

the event registered when element on pie chart selected actual event handler fired. angular js 2 scope variables referenced aren't in scope. it's if the google chart visualization library running in own scope.

i know angular js 1 has angular-charts directive cannot use company wants use angular 2 only.

is there way can google charts api 'bubble' event event handler running on scope of angular component.

if want myselecthandler takes part within angular2 context / change detection, leverage ngzone, described below. way, changes make in function update view accordingly.

import {ngzone} '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 correctly understood question. thierry