title: Angular 4 Zooming
body: <p>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.</p>
  
  <p>Steps i followed </p>
  
  <p>1) npm install --save jquery</p>
  
  <p>2) npm install --save @types/jquery</p>
  
  <p>3) import * as $ from 'jquery';</p>
  
  <pre><code>   //till here jquery works fine
      $('.sample').click(function () {
        alert('div clicked.');
      });
  </code></pre>
  
  <p>3) npm install --save jquery.panzoom</p>
  
  <pre><code>   $('#panzoomDiv').panzoom(
        {
          $zoomIn: $('.zoom-in'),
          $zoomOut: $('.zoom-out'),
          $zoomRange: $('.zoom-range'),
          $reset: $('.reset')
        } 
      );
  </code></pre>
  
  <p>here i get the error</p>
  
  <pre><code>src/app/app.component.ts (22,22): Property 'panzoom' does not exist on type 
  'JQuery&lt;HTMLElement&gt;'.
  </code></pre>
  
  <p>then after going through <a href="https://medium.com/@NetanelBasal/typescript-integrate-jquery-plugin-in-your-project-e28c6887d8dc" rel="nofollow noreferrer">this</a>, i added</p>
  
  <pre><code>interface JQuery {
    panzoom(options: any): any;
  }
  </code></pre>
  
  <p>to my typings.d.ts file.
  Now it does compiles but gives this run time error</p>
  
  <pre><code> 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)
  </code></pre>
  
  <p>can someone please redirect me to a correct solution or a different zooming library. </p>
  
  <p>Something like <a href="http://openseadragon.github.io/" rel="nofollow noreferrer">this</a></p>
  
  <p><strong>Update</strong></p>
  
  <p>tried this approach, still doesn't work.</p>
  
  <pre><code>    &lt;div style="display:block; padding: 10px;"&gt;
        &lt;button id="btn-zoom-in-workspace"
                class="zoom-out"&gt;Zoom Out
        &lt;/button&gt;
        &lt;button id="btn-zoom-null-workspace"
                class="reset"&gt;Reset
        &lt;/button&gt;
        &lt;button id="btn-zoom-out-workspace"
                class="zoom-in"&gt;Zoom In
        &lt;/button&gt;
        &lt;input type="number" class="zoom-range"&gt;
     &lt;/div&gt;
     &lt;div id="panzoomDiv" #panzoomDiv&gt;
     &lt;div&gt;
  
      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')
          });
       }
    }
  </code></pre>