Ionic 2 ionScroll event to not refresh view

Question

I add to the a ionScroll event which triggers the method foo() and in a a click event wh

Answer 1

That's because something very interesting and powerfull called Zones. If the concept is new for you, please refer to here and here for a great explanation.

As you can read there,

Application state change is caused by three things:

1) Events - User events like click, change, input, submit, …

2) XMLHttpRequests - E.g. when fetching data from a remote service Timers -

3) setTimeout(),setInterval(), because JavaScript

… it turns out that these are the only cases when Angular is actually interested in updating the view.

That's why the view is not being updated when you scroll, but it does when you touch any of the elements of the page (since it's a user event).

In order to fix this, one of the options is to let Angular know that it needs to be aware of some changes you're just about to make, because things will probably need to be updated. You can do that by running some code (the code that updates the x property) inside a zone, like this:

import { Component, NgZone } from '@angular/core';

@Component({...})
export class MyPage {

    constructor(..., private ngZone: NgZone) {}

    public yourMethod(): void {
        this.ngZone.run(() => {
            // Update the x property here, and the view will be updated!
        });
    }
}