How can we integrate elevateZoom with angular 2

Question

I have added the jquery and the zoom plugin file on my index.html. On my zoom component I have written some thing like the below code

 import { Component,ElementRef,ngAfterViewInit } from '@angular/core';
        @Component({
      selector: 'product-gallery',
      template: ` <div class="zoomWrapper">
                        <img id="elevatezoom_big" src="img/grande.png" data-zoom-image="img/grande.png"  />
                        </div>                  
      `, 
    })
   export class ZoomComponent implements ngAfterViewInit{ 
     rootNode : any;
        container: any;
     constructor(rootNode: ElementRef) {
          this.rootNode = rootNode; 
        }

    ngAfterViewInit() {
         this.container = $(this.rootNode.nativeElement).find('#elevatezoom_big');
         //console.log($(this.rootNode.nativeElement).find('#elevatezoom_big').attr('src'))
            this.container.elevateZoom({
                zoomType: "inner",
                cursor: "crosshair",
                zoomWindowFadeIn: 500,
                zoomWindowFadeOut: 750
            }); 


         }

    }

But it is not initializing the the plugin. If I use the same code in index.html and if the image is also present in index.html, it is working fine.

hey @varada I'm also trying to integrate elevate zoom jquery plugin with Angular2, but getting following error:Can't bind to 'zoom-image' since it isn't a known property of 'img' Can you please tell me how you integrated elevate zoom plugin with Angular 2 ? any pointers will be helpful. Thanks !! — Deepak Rai, Jan 20 '17 at 11:16

Thierry Templier · Answer 1 · 2016-08-08T05:52:04.033

I would use the ngAfterViewInit hook method. So the DOM will have been initialized. It's not the case with ngOnInit:

export class ZoomComponent { 
  rootNode : any;
  container: any;

  constructor(rootNode: ElementRef) {
    this.rootNode = rootNode; 
  }

  ngAfterViewInit() { // <------
    (...)
  }
}

Edit

I would also use the ViewChild decorator to reference your image. Here is a sample:

@Component({
  selector: 'product-gallery',
  template: ` <div class="zoomWrapper">
    <img #elevatezoomBig src="img/grande.png" data-zoom-image="img/grande.png"  />
  </div>                  
  `, 
})
export class ZoomComponent implements ngAfterViewInit{ 
  @ViewChild('elevatezoomBig') container : ElementRef;

  ngAfterViewInit() {
    this.container.nativeElement..elevateZoom({
      zoomType: "inner",
      cursor: "crosshair",
      zoomWindowFadeIn: 500,
      zoomWindowFadeOut: 750
    }); 
  }
}

Thanks for the help, I tried that too. But it is also not working. I have edited the question as per the change — Varada, Aug 08 '16 at 05:48
You're welcome! Perhaps you could use the `ViewChild` decorator. I updated my answer accordingly... — Thierry Templier, Aug 08 '16 at 05:52

How can we integrate elevateZoom with angular 2

1 Answers1