Out of NgZone and can't bind data in latest angular version.

[mayankkataria]

I'm sliding on screen and getting x coordinate with hammerjs and on same time I'm trying to view the value of x on HTML template through data binding. As I slide, the value of x is changing in console but that value is not shown on HTML view. The value of x (on HTML view) is changed only when I stop sliding and touch the screen again.

HTML

<ion-content id="ion-content">
  <div>
    x: {{x}}
  </div>
</ion-content>

TS

const ionContent = document.getElementById('ion-content');
const mc = new Hammer.Manager(ionContent);
const pan = new Hammer.Pan();
mc.add([pan]);
mc.get('pan').set({enable: true});
mc.on('pan', ev => {
  this.x = ev.center.x;
  console.log('x: ', this.x);
});

Note: I'm facing this issue in latest version of ionic-angular (in android using capacitor plugin)