Gestures with Angular bindings

I’ve got a page with a simple swipe gesture. 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?

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

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

Is this a bug in Ionic? Over on StackOverflow I received this suggestion: https://stackoverflow.com/a/60257647/1775470
But it looks more like a workaround to me…

I’ve run into this this week as well. In my case, I’ve got a style binding in a component that isn’t updating in response to changes to an input property during a gesture, and I had landed in the same place that the StackOverflow post did - manually firing detectChanges updates the css and gives me back the functionality I’d expected. I’d originally implemented it in Ionic 4 with HammerJS, which didn’t require a manual detectChanges.

The possibility we’re both doing something wrong is there, but it does seem a bit suspect.