ionic 4 – setting page variable not working in iOS and Android, but browser OK in browser

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.

>Solution :

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!