(ionScroll) do not bind variables in its scope

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-content (ionScroll)="updateVariable($event)">
  variableToUpdate: {{variableToUpdate}}<br>
a lot of text to have some height to scroll down and up...


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

  selector: 'ion-scroll-test',
  templateUrl: 'ion-scroll-test.html'

export class IonScrollTest {

  variableToUpdate: boolean = true;

  updateVariable() {
    this.variableToUpdate = !this.variableToUpdate;

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?