How to access class variable / methods in callback in Typescript?

Question

I'm using high chart API in my angular project, so what I need is when I drilldown to any map location, I've got the state code which I passed into my class level method to do some service stuff in it.

Here is my current code:

ngOnInit() {

this.chartOptions = {
  chart: {
    height: (8 / 16) * 100 + '%',
    events: {
      drilldown(e) {
        // ERROR Error: this.getVendorProductStatsByStateCode is not a function
        this.getVendorProductStatsByStateCode(e.point.drilldown);
        const chart = this as any;

        const mapKey = 'countries/ca/' + e.point.drilldown + '-all';
        const mapData = require(`@highcharts/map-collection/countries/ca/ca-on-all.geo.json`);
        const provinceData = Highcharts.geojson(mapData);
        provinceData.forEach((el: any, i) => {
          el.value = i;
        });

        chart.addSeriesAsDrilldown(e.point, {
          name: e.point.name,
          data: provinceData,

          dataLabels: {
            enabled: true
          }
        });

        chart.setTitle(null, { text: e.point.name });
      },
      drillup() {
        const chart = this as any;
      }
    }
  },
  title: {
    text: ''
  },
  colorAxis: {
    min: 0,
    minColor: '#E6E7E8',
    maxColor: '#417BCC'
  },

  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },
  plotOptions: {
    map: {
      states: {
        hover: {
          color: '#F8BA03'
        }
      }
    }
  },
  series: [
    {
      name: 'Canada',
      data: caMap
    }
  ],
  drilldown: {}
};
}

getVendorProductStatsByStateCode(mapstateCode) {
    console.log(mapstateCode);
}

Here is the stackblitz running example

When calling the drilldown function I want to access this.getVendorProductStatsByStateCode, which is in my class component method. What is the right way to achieve it?

Answer 1

You can define your component in a variable and use this variable instead of (this) because it is instance of method not the component like that:

  caMap.forEach((el: any, i) => {
      el.value = i;
      el.drilldown = el.properties['hc-key'];
    });
    var myComp = this;
    this.chartOptions = {
      chart: {
        height: (8 / 16) * 100 + '%',
        events: {
          drilldown(e) {
            // ERROR Error: this.getVendorProductStatsByStateCode is not a function
            myComp.getVendorProductStatsByStateCode(e.point.drilldown);
            const chart = this as any;

            const mapKey = 'countries/ca/' + e.point.drilldown + '-all';
            //Stackbliz wont load data if you pass mapkey as variable. So I use a hard code one in this example.
            // const mapData = require(`@highcharts/map-collection/${mapKey}.geo.json`);
            const mapData = require(`@highcharts/map-collection/countries/ca/ca-on-all.geo.json`);
            const provinceData = Highcharts.geojson(mapData);
            // Set a random value on map
            provinceData.forEach((el: any, i) => {
              el.value = i;
            });