Cannot read property 'isDragging' of undefined

[klochko7]

Good day! I install [email protected] to my Ionic 5.1.1 project and see such error Cannot read property 'isDragging' of undefined.

main-es2015.37eb728e495d1fcd6056.js:1 ERROR TypeError: Cannot read property 'isDragging' of undefined
at a.get isDragging [as isDragging] (main-es2015.37eb728e495d1fcd6056.js:1)
at Object.updateRenderer (main-es2015.37eb728e495d1fcd6056.js:1)
at Object.updateRenderer (main-es2015.37eb728e495d1fcd6056.js:1)
at Nl (main-es2015.37eb728e495d1fcd6056.js:1)
at Ul (main-es2015.37eb728e495d1fcd6056.js:1)
at zl (main-es2015.37eb728e495d1fcd6056.js:1)
at Nl (main-es2015.37eb728e495d1fcd6056.js:1)
at Ul (main-es2015.37eb728e495d1fcd6056.js:1)
at zl (main-es2015.37eb728e495d1fcd6056.js:1)
at Nl (main-es2015.37eb728e495d1fcd6056.js:1)

any ideas?

[drozhzhin-n-e]

@klochko7 Try to get the code from this repository. Do you face the same problem?

[jarnstadt]

@klochko7 Facing the same issue under angular 8 and the latest version available in npm.

[kaustubhnj]

@jarnstadt Are you using any conditional statement on the img tag?

[jarnstadt]

@kaustubhnj yes I do.

[kaustubhnj]

@jarnstadt
I was facing similar issue.
The condition needs to be checked at the level of tag.
<pinch-zoom *ngIf="condition">

Worked for me.

[mayankkataria]

I have no condition and this problem is still arising. Instead of img, I have div tag inside pinch-zoom with hidden attribute and ngfor directive. I tried to move them to pinch zoom and it disappeared.
I'm trying to zoom text blocks on canvas with pinch gesture. I already have one mousedown event for drawing purpose. So whenever I'm trying to pinch, a sketch is drawn.
Here's my code for pinch-zoom -

<pinch-zoom>
    <!-- textblocks -->
    <div [hidden]="textModalOpened" *ngFor="let textBlock of TEXT_BLOCKS">
      <div id="t1" class="text text1 ion-text-center" (touchstart)="textTouched($event)" (mousedown)="textTouched($event)"
        (touchmove)="textMoved($event, textBlock)" (mousemove)="textMoved($event, textBlock)"
        (touchend)="textUntouched($event, textBlock)" (mouseup)="textUntouched($event, textBlock)" style="
      top: {{ textBlock.position.y }}px;
      left: {{ textBlock.position.x }}px;
      font-family: {{ textBlock.fontFamily }};
      font-size: {{ textBlock.overDelete ? 10 : textBlock.fontSize }}px;
      color: {{ textBlock.color }};
      width: {{ textBlock.overDelete ? 70 : textBlock.width }}px;
      height: {{ textBlock.overDelete ? 70 : textBlock.height }}px;
      ">
        {{ textBlock.text }}
      </div>
    </div>
  </pinch-zoom>