Get Variable Value outside of Object Property

August 19, 2022

I’m still a newbie to angular and js but I’m trying to setup a interactive world map where you click one country and get some values.
I’m using jsvectormap and angular. Jsvectormap provides the onRegionClick function. Within that function i set the country variable to the clicked country which works fine. but i cant access this value outside of the object property.

See the code in this demo: https://stackblitz.com/edit/angular-interactiveworldmap

Any ideas how this could work? Thanks in advance

>Solution :

Please change it to an arrow function.

Unlike regular functions, arrow functions do not have their own this.
The value of this inside an arrow function remains the same throughout
the lifecycle of the function and is always bound to the value of this
in the closest non-arrow parent function.

To learn more visit here

onRegionClick: () => {
    var selectedCountry = map.getSelectedRegions();
    console.log('selectedCountry: ', selectedCountry);
    this.country = selectedCountry;
    console.log('this.country: ', this.country);
    //this.getCountry();
  },

stackblitz