(ionScroll) do not bind variables in its scope

Ionic Framework ionic-v3
1

I need to update a variable by using (ionScroll) event in a component.

The example is simple. It has two files, a .ts file and a .html file that both are a component.

HTML file has:

  • The necessary text to scroll down and scroll up.
  • An (ionScroll) event in its “ion-content” that trigger an event each time that we scroll to any direction.

Typescript file has:

  • A variable that needs to be updated in its inverse boolean.
  • A method that set the inverse value of a variable.

ion-scroll-test.html

<ion-content (ionScroll)="updateVariable($event)">
  variableToUpdate: {{variableToUpdate}}<br>
/*
a lot of text to have some height to scroll down and up...
*/
</ion-content>

ion-scroll-test.component.ts

import {Component} from "@angular/core";

@Component({
  selector: 'ion-scroll-test',
  templateUrl: 'ion-scroll-test.html'
})

export class IonScrollTest {

  variableToUpdate: boolean = true;

  updateVariable() {
    this.variableToUpdate = !this.variableToUpdate;
    console.log('helo');
  }
}

So, the console.log in to updateVariable is shown in console, but the variable is not bound properly.

Can someone explain me why reason it has that behaviour?

And how can I resolve my problem?

Thanks.