javascriptangulartypescriptangular-clipanzoom

How to use Panzoom javascript in Angular 8+?

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

Solution

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