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