I'm using google maps and trying to show a div when the user clicks a pin.
<div *ngIf="this.viewing_place">
{{ this.viewing_place?.title || 'NO_PLACE' }}
</div>
function redrawMap(){
let self = this;
this.places.forEach(function(place){
let marker = self.map.addMarkerSync({ position :new LatLng(place.pin_lat, place.pin_long) });
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
self.openPlaceInfo(place);
});
});
}
The click event is working good and the place object is being passed ok.
openPlaceInfo(place){
console.log(place); //===========> shows correct object
this.viewing_place = place; //======> set the page variable
}
The problem is that the div is not being displayed, like the variable this.viewing_place is not set.
So I created a manual method just for testing, and when I use this function, it works correctly.
manuallyTest(){
this.viewing_place = {title:'test place'};
}
Am I doing something wrong? This happens only in iOS an Android.. It works perfectly in browser.
In mobile devices, angular has limitation calling change detection cycle when a variable updates from observable. I experienced this when I worked with Ionic. Try running you function inside NgZone to force the change detection cycle to re-render the UI.
constructor() {
...
private zone: NgZone
}
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
this.zone.run(() => {
self.openPlaceInfo(place);
});
});
OR
openPlaceInfo(place){
console.log(place); //===========> shows correct object
this.zone.run(() => {
this.viewing_place = place; //======> set the page variable
});
}
Hope this helps you!