aatish rana aatish rana - 2 months ago 38
TypeScript Question

Angular 4 Zooming

I am new to Angular 4 and trying to find a library for pan zooming.
I am not able to find any package on npm. I tried to add jquery in my project, then added jquery.panzoom, but because jquery.panzoom is written in JavaScript and my angular project is in TypeScript there is no @types for jquery.panzoom so it is not working.

Steps i followed

1) npm install --save jquery

2) npm install --save @types/jquery

3) import * as $ from 'jquery';

//till here jquery works fine
$('.sample').click(function () {
alert('div clicked.');
});


3) npm install --save jquery.panzoom

$('#panzoomDiv').panzoom(
{
$zoomIn: $('.zoom-in'),
$zoomOut: $('.zoom-out'),
$zoomRange: $('.zoom-range'),
$reset: $('.reset')
}
);


here i get the error

src/app/app.component.ts (22,22): Property 'panzoom' does not exist on type
'JQuery<HTMLElement>'.


then after going through this, i added

interface JQuery {
panzoom(options: any): any;
}


to my typings.d.ts file.
Now it does compiles but gives this run time error

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).panzoom is not a function
at AppComponent.webpackJsonp.117.AppComponent.ngOnInit (app.component.ts:22)
at checkAndUpdateDirectiveInline (core.es5.js:10848)
at checkAndUpdateNodeInline (core.es5.js:12349)
at checkAndUpdateNode (core.es5.js:12288)
at debugCheckAndUpdateNode (core.es5.js:13149)
at debugCheckDirectivesFn (core.es5.js:13090)
at Object.eval [as updateDirectives] (AppComponent_Host.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)
at checkAndUpdateView (core.es5.js:12255)
at callWithDebugContext (core.es5.js:13475)


can someone please redirect me to a correct solution or a different zooming library.

Something like this

Update

tried this approach, still doesn't work.

<div style="display:block; padding: 10px;">
<button id="btn-zoom-in-workspace"
class="zoom-out">Zoom Out
</button>
<button id="btn-zoom-null-workspace"
class="reset">Reset
</button>
<button id="btn-zoom-out-workspace"
class="zoom-in">Zoom In
</button>
<input type="number" class="zoom-range">
</div>
<div id="panzoomDiv" #panzoomDiv>
<div>

import * as $ from 'jquery';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('panzoomDiv') panzoomDiv: ElementRef;
ngAfterViewInit(): void {
if (this.panzoomDiv)
$(this.panzoomDiv.nativeElement).panzoom({
$zoomIn: $('.zoom-in'),
$zoomOut: $('.zoom-out'),
$zoomRange: $('.zoom-range'),
$reset: $('.reset')
});
}
}

Answer Source
  • npm install --save jquery

  • Install jquery Panzoom

Add these to the scripts array of angular-cli.json

"scripts": [ 
"../node_modules/jquery/dist/jquery.min.js", 
"../node_modules/jquery.panzoom/dist/jquery.panzoom.min.js" 
],

In template

   <div style="display:block; padding: 10px;">
      <button id="btn-zoom-in-workspace"
              class="zoom-out" #reference>Zoom Out
      </button>
      <button id="btn-zoom-null-workspace"
              class="reset" #reference>Reset
      </button>
      <button id="btn-zoom-out-workspace"
              class="zoom-in" #reference>Zoom In
      </button>
      <input type="number" class="zoom-range">
   </div>
   <div id="panzoomDiv" #panzoomDiv>
   <div>

In the component use this

declare var $ : any;

@ViewChild('panzoomDiv') panzoomDiv: ElementRef;
//get all the other element references using elementref and use it in function below
     ngAfterViewInit(): void {
        if (this.panzoomDiv)
           $(this.panzoomDiv.nativeElement).panzoom({
                $zoomIn: $(#reference),
                $zoomOut: $(#reference),
                $zoomRange: $(#reference),
                $reset: $(#reference)
        });
     }