Mapboxgl click listener function in Angular2

Question

I have a component in Angular2 in which I have mapboxgl map click listener and function which is called after click is fired. I suppose that it's the lack of my experience or it is mapboxgl specific issue, but I can't figure it out how to pick up variable outside of that function. this.something doesn't work. I guess that it's some kind of scope problem ... Here is the bare essential of the problem (console print out undefined ) ...

public map: Map;
public test: string = 'test'; 

initialize() {
    this.map.on('click', clickListener);
}

clickListener() {
    console.log(this.test); // undefined
}

Answer 1

I think you need to hand the event to the function. Here is how I approached the same issue:

this.map.on('click', (event: any) => {
    const features = this.map.queryRenderedFeatures(event.point, {layers: ['markers']})
    if (features.length) {
        console.log(features)
    }
})

Answer 2

Try something like:

public map: Map;
public test: string = 'test'; 

initialize() {
    this.map.on('click', clickListener.bind(this));
}

clickListener() {
    console.log(this.test); // undefined
}