Angular 2 interpolation not working inside listener of google maps

I have an Angular 2 project using google maps. The map initially appeared. When the map is moved, I'd like to get the center of the map and using geocode to get the address. After I get the address, I'd like to show the address to the info screen.

@Component({
    templateUrl: '<div #map></div>
        <p></p>'
})
export class MapComponent implement OnInit {
    info = 'initial'
    showInfo = string => {
        console.log(this.string);
        this.info = string;
        console.log(this.string);
    }
    ...
}

I'm using method showInfo to help me debug this problem. in the ngOnInit, I'm initializing the map. Funny things is, if I'm calling the show info directly from the ngOnInit, the text inside <p></p> on the browser changing

ngOnInit() {
    ... // let say I'm already initialize the map
    this.showInfo('test this'); // WORKING
}

but after I put a listener into my map it is stop working

ngOnInit() {
    this.map.addListener('center_changed', () => {
         const location = ... // let say I'm already get the location
         this.showInfo(location); // NOT WORKING
    });
}

suddenly the angular 2 interpolation cannot work and the text in the browser is not changing, the console.log() inside the showInfo() says the variable info already changing but the text inside <p></p> is not changing.