image zoom doesn't refresh when changing image

[marouaneterai]

Hi, i'm working on an angular 5 project, tried to integrate elevatezoom-plus as a jquery 3rd part script, and i created mouseenter methode to call:

 $('#zoom-image').ezPlus({
      zoomType: 'inner',
      cursor: 'crosshair',
      scrollZoom: true
    });

And this works fine until i added some other images to create somthing like a gallery, when i clic to select another image from my list (gallery) the first clic works fine and the zoom works fine, but then when i clic, the main image change but the zoom window show me another image (the previous image).

<div class="row">
          <div class="col-sm">
            <img id="zoom-image" alt="vehicle.brand" src="{{imagesPath+selectedPhoto}}" (mouseenter)="zoomInImage()">
          </div>
        </div>
        <div class="row mt-4">
          <div *ngFor="let photo of tchek.photos" [ngClass]="tchekToBeCompared ? 'col-md-4' : 'col-md-2'">
            <img src="{{imagesPath+photo.url}}" alt="tchek.vehicle.brand" height="80" width="100%" [ngClass]="(selectedPhoto === photo.url)  ? 'photo-small-selected photo-small' : ' photo-small'" (click)="selectedPhoto = photo.url">
          </div>
        </div>

[igorlino]

Angular 5 has its own rendering cycle. Seems to me very application/framework specific. Could be that the ngFor is removing DOM event handlers.

The issue tracker is for issues, in other words, bugs and suggestions. If you have a question, please use Stack Overflow, your favorite search engine, or other resources. Due to increased similar type of questions, we can no longer answer questions in the issue tracker.