CODEWITHSUNDEEP
jqueryhtmlangularangular5elevatezoom
Sumit Balia
Sumit Balia

Reputation: 41

How to use elevate-zoom in Angular 5?

A Jquery Image Zoom Plugin

I am using elevate-zoom jquery plugin in my angular 5 app but it's showing error

ERROR TypeError: this.elevatezoomBig.nativeElement.elevateZoom is not a function

enter image description here

Here's my code

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class ProductComponent implements AfterViewInit, OnInit {
    ngAfterViewInit() {
        @ViewChild('elevatezoomBig') elevatezoomBig : ElementRef;

        this.elevatezoomBig.nativeElement.elevateZoom({
            borderSize: 1,
            lensFadeIn: 200,
            cursor: 'crosshair',
            zoomWindowFadeIn: 200,
            loadingIcon: true,
            zoomWindowOffety: -50,
            zoomWindowOffetx: 50,
            zoomWindowHeight: 530,
            responsive: true
        });
    }
}

Upvotes: 0

Views: 693

Answers (1)

Alberto Chiesa
Alberto Chiesa

Reputation: 7350

Well, when using jQuery plugins pay attention to two things:

  1. every event that happens (every one) is going to trigger a change detection. So if the jQuery plugin is not "educated" you risk to incur in performance issues. To attenuate this, you can run jQuery code "outside Angular".
  2. it's still a jQuery plugin, so you should use the global jQuery object to access it.

Having said that, I would try the following:

// this line tells TypeScript that something called "$" exists
declare let $: any;

// I'm assuming you omitted the "component" declaration
export class ProductComponent implements AfterViewInit, OnInit {

    @ViewChild('elevatezoomBig') elevatezoomBig : ElementRef;

    constructor(private ngZone: NgZone) {}

    ngAfterViewInit(): void {
        ngZone.runOutsideAngular(() => {
            $(this.elevatezoomBig.nativeElement).elevateZoom({
                borderSize: 1,
                lensFadeIn: 200,
                cursor: 'crosshair',
                zoomWindowFadeIn: 200,
                loadingIcon: true,
                zoomWindowOffety: -50,
                zoomWindowOffetx: 50,
                zoomWindowHeight: 530,
                responsive: true
            });
        })
    }
}

Edit: the syntax constructor(private ngZone: NgZone) lets you declare a property named ngZone and whose value is automatically set to the value of the constructor's parameter ngZone. See here under Parameter Properties.

When you use a jQuery plugin, you need the DOM to be already processed. The instantiation of a component (the so called life cycle) follows three basic steps: constructor -> the runtime fills in input properties -> ngOnInit -> the template is processed and the DOM initialized -> ngOnAfterViewInit. If you don't know very well this sequence, do yourself a favor and read here as soon as you can. Trust me, you'll thank me later.

Having said this, we need to call the plugin initialization code in ngAfterViewInit.

Upvotes: 0

Related Questions