Ngif doesn't toggle DIV with Ionic V2 and Google Map

I’m new to Ionic and Angular. I just start a app using Googlemap and see weird behaviour of Ngif. Here is snippet of the code. Basically I like a FAB flow over googlemap and show or not-show based on certain condition.

HTML

<div *ngIf="isListShow">
    <button fab  primary outline fab-bottom fab-center>
      <ion-icon name="list-box" is-active="true"></ion-icon>
    </button>
  </div>

Then I have googlemap Listenser to toggle icon but it doesn’t. Any idea?

   google.maps.event.addListener(this.map, 'idle', () => {
         this.isListShow = true;
      });

this.isListShow does’t work inside the addListener since its a pure javascript and it cannot recognise typescript types. If you check on the console you will be getting the error as undefined or not found

There is no error. I can print proper variable

CODE
google.maps.event.addListener(this.map, ‘idle’, () => {
this.currentDiv = ‘’;
this.isListShow = true;
console.log(“Print isListShow:” + this.isListShow);
this.changeMap();
});

When Map is change and idle. Console output

Print isListShow:true
map-search.ts:393 Change Map: Button Show?true

Just for whatever reason, it doesn’t trigger *Ngif

This is probably one of those rare times that you will need to mess with zones manually. Try something like this:

constructor(private _zone:NgZone) {
}

google.maps.event.addListener(this.map, 'idle', () => {
  this._zone.run(() => {
    this.isListShow = true;
  });
});
1 Like

Appreciate your help! It does work and show button on/off based on logic trigger by listener event