3

I am unable to use Panzoom Javascript library in Angular. I get 

ERROR
Error: panzoom is not defined

Here is the stackblitz of what i have done till now . Here is the working demo of how it should work

Can any one help me troubleshoot ? Thanks

I have followed all the steps mentioned in this post

dota2pro
  • 7,220
  • 7
  • 44
  • 79

2 Answers2

7

It seems Panzoom does have typescript definitions Github Issue

here is a working stackblitz

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import panzoom from "panzoom";

@Component({
  selector: 'hello',
  template: `<img id="scene" #scene src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">`,
  styles: []
})
export class HelloComponent implements AfterViewInit {
  @ViewChild('scene', { static: false }) scene: ElementRef;

  ngAfterViewInit() {
    // panzoom(document.querySelector('#scene'));
    panzoom(this.scene.nativeElement);
  }
}
dota2pro
  • 7,220
  • 7
  • 44
  • 79
  • getting this error for your example in my application. ERROR TypeError: Cannot read property 'nativeElement' of undefined – youeye Jun 25 '20 at 08:54
  • wrap it around `if(this.scene)` maybe your code is executing before the element is loaded into dom i am doing it in ngAfterview Init you can also test by using setTimeout – dota2pro Jun 25 '20 at 16:40
  • nice! that was easy – WtFudgE Nov 23 '20 at 05:57
  • There is a bug when increases to 150% and then decreases - it continues to increase one more time. – Avi Dec 10 '20 at 10:08
3

There is an easy way to do this.

  1. Open your angular project in cmd terminal (root of your project, the same foler which contains /src).
  2. Type npm install panzoom --save (that will add panzoom npm package to your angular.json and install it).
  3. In your component add import import * as panzoom from "panzoom" (your project should automaticaly link it with the right file from node_modules.
  4. in ngOnInit or anywhere needed add this line panzoom.default(document.querySelector('#lipsum'));

You should generally incject this PanZoom package in your component constructor after importing it from node_modules but I'm not sure if there is an integration provided by an author.

Definitely check NPM documentation of this plugin for more info

Kacper Cieluch
  • 437
  • 3
  • 16