How to use Panzoom javascript in Angular 8+? - Stack Overflow

admin管理员组

文章数量:1287579

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

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

• javascript
• angular
• typescript
• angular-cli
• panzoom

Share Improve this question Follow edited Aug 14, 2019 at 20:07 dota2pro asked Jun 7, 2019 at 16:22 dota2prodota2pro 7,86688 gold badges5151 silver badges8787 bronze badges 2

• Perhaps npmjs./package/ng2-panzoom this package will help? – penleychan Commented Jun 7, 2019 at 16:46
• 1 @penleychan nope, it's different library. – Oleksandr Bilenko Commented Oct 2, 2019 at 15:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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 ponent 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 ponent 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

本文标签： How to use Panzoom javascript in Angular 8Stack Overflow