ionic 2 3, why after scrolling, value of variable doesn't change? - ionic-framework

Question

I was wrote this code for showing button after scrolling is more than 500px, but "showButton" didn't get new value.
<ion-content (ionScroll)="onScroll($event)">
<button *ngIf="showButton">Scroll Top</button>
</ion-content>
my.ts file:
showButton= false;
onScroll($event) {
if ($event.scrollTop > 500) {
console.log(this.showButton);
this.showButton= true;
}
}
This console.log shows change of "showButton", but in html it doesn't change.
"showButton" for first time get value "false" but when value change to "true" it can not listen to change, how I can solve this?

Answer 1

From the ionic docs, Scroll Events Scroll events happen outside of
Angular's Zones. This is for performance reasons. So if you're trying
to bind a value to any scroll event, it will need to be wrapped in a
zone.run()
<ion-content (ionScroll)="onScroll($event)">
<button *ngIf="showButton">Scroll Top</button>
</ion-content>
//add import in .ts file
import { Component, NgZone } from '#angular/core';
//in constructor
constructor(
public zone: NgZone,
showButton= false;
onScroll($event) {
this.zone.run(() => {
if ($event.scrollTop > 500) {
console.log(this.showButton);
this.showButton = true;
}
})
}

Answer 2

//Method 1) use boolean variable
<ion-content (ionScroll)="onScroll($event)">
<button *ngIf="showButton">Scroll Top</button>
</ion-content>
showButton:boolean= false;
onScroll($event) {
if ($event.scrollTop > 500) {
console.log(this.showButton);
this.showButton= true;
}
}
OR
//Method 2) use number variable
<ion-content (ionScroll)="onScroll($event)">
<button *ngIf="showButton==1">Scroll Top</button>
</ion-content>
showButton:number= 0;
onScroll($event) {
if ($event.scrollTop > 500) {
console.log(this.showButton);
this.showButton= 1;
}
}