bug: Template bindings are not updated in gesture callback function

Bug Report

Ionic version:

[x] 5.x

Current behavior: Implementing a swipe gesture with the GestureController doesn’t invoke change detection. Values that get changed in onEnd are not updated in Angular-bound template elements.

Expected behavior: Angular-bound values which are changed in onEnd callback function of the SwipeGesture should be updated on the page.

Steps to reproduce:

Use the sample code below to reproduce the issue. It implements a swipe gesture which increases a counter variable. It shows the value on the console on each swipe. But the updated value is not reflected on the page itself where the output is bound via template binding.

Related code:

Template:

<ion-content #contentElement>
    {{ counter }}
</ion-content>

Typescript:

export class TestPage {

  counter = 0;

  swipeGesture: Gesture;
  @ViewChild('contentElement', { static: true, read: ElementRef }) contentElement: ElementRef;

  constructor(private gestureController: GestureController) { }

  ionViewDidEnter() {
    this.swipeGesture = this.gestureController.create({
      el: this.contentElement.nativeElement,
      gestureName: 'swipe',
      onEnd: () => this.onSwipeEnd(),
    });
    this.swipeGesture.enable();
  }

  private onSwipeEnd() {
    this.counter++;
    console.log(this.counter);
  }

}

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.3.23
   @angular/cli                  : 8.3.23
   @ionic/angular-toolkit        : 2.1.2

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/Users/jens/Library/Android/sdk)
   ios-deploy        : 1.9.2
   NodeJS            : v12.14.0 (/usr/local/bin/node)
   npm               : 6.13.7
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504

[NikolaPeevski]

@JensWinter A simple getaway fix is to add changeDetection in your component configuration. Example would be:

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

Constructor:

  constructor(private gestureController: GestureController, 
    private _changeDetection: ChangeDetectorRef) { }

Function call:

  private onSwipeEnd() {
    this.counter++;
    console.log(this.counter);
    this._changeDetection.detectChanges();
  }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.