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.


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

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

   google.maps.event.addListener(, '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

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

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(, 'idle', () => { => {
    this.isListShow = true;
1 Like

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