Ionic 5 gesture doesn't work with Angular bindings

Question

I’ve got an Ionic page with a simple swipe gesture using the GestureController as described in the docs. On the swipe end event I increment a counter. There is a binding on the html of the page, which doesn’t get updated. Console.log() shows the updated counter, though.

Is there a known issue about that or am I doing something wrong?

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

}

Answer 1

I had a similar issue and what I did was inject the ChangeDetectorRef into the constructor.

constructor(private ref: ChangeDetectorRef) {}

Then in you can run the change detection manually.

private onSwipeEnd() {
   this.counter++;
   console.log(this.counter);
   this.ref.detectChanges(); // Runs the change detection
}