How to use Panzoom javascript in Angular 8+?

Question

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

Answer 1

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

Answer 2

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