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

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?

See my example here: https://stackoverflow.com/questions/45658827/ionic-scroll-to-div/45658989#45658989 — JGFMK, Aug 13 '17 at 11:37
i think the showbutton is not type boolean, try with a number , showButton:number= 0; and in scroll function this.showButton= 1; — rashidnk, Aug 13 '17 at 12:54
can u post all ur code ?, or print the value of showButton in html like {{showButton}} in ioncontent — rashidnk, Aug 14 '17 at 05:50
Try `setTimeout(()=>{this.showButton= true;},0)` It will trigger angular change detection — Duannx, Aug 14 '17 at 06:14
@rashidnk, I tried it but it shown an error and white screen — M.Hajavi, Aug 14 '17 at 06:19
when I scrolling the page (more than 500px) and then clicking on back btn this button shown for a moment, but why? this shown my code is true but I can't find the problem — M.Hajavi, Aug 14 '17 at 06:38
@Duannx i tried it : setTimeout(()=>{this.showButton= true;},0) but it works same as my code — M.Hajavi, Aug 14 '17 at 06:52
Seem like your problem is not in these code above. Please post your full html and .ts or create a working plunker that we can play with. — Duannx, Aug 14 '17 at 06:54

score 5 · Accepted Answer · answered Aug 14 '17 at 06:40

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;
          }
        })
      }

score 0 · Answer 2 · answered Aug 13 '17 at 12:58

//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;
      }
    }

"showButton" for first time get value "false" but when value change to "true" it can not listen to change, how I can solve this? — M.Hajavi, Aug 14 '17 at 05:58

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

2 Answers2