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(),

  private onSwipeEnd() {

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

Is this a bug in Ionic? Over on StackOverflow I received this suggestion:
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 seemingly most useful thing I’ve found is that the component’s ngDoCheck isn’t being fired when I’m setting the input property via a gesture’s event handler, but does get fired if I have a button that uses the same function to update the property.