ng2-image-viewer throws error when using inside *ngIf

[crwbasnayake]

I am using your library to display both image and pdf inside my webpage. I was able to display the images and pdfs when the component is using outside of my html content. But my pdf and image files are loading from a service and those files should be displayed after that.

So I have placed your component inside *ngIf condition and after that library is not working. This is the sample code. <div *ngIf="this.remoteFileLoaded() == true"> <app-image-viewer [idContainer]="'appImageViewer'" [images]="['https://images.nga.gov/en/web_images/niagara2.jpg']" [loadOnInit]="true"></app-image-viewer> </div>

I tried with both 'true' and 'false' for [loadOnInit] and still did not find any success. So I did some debugging and found that this code block of ng2-image-viewer.umd.js causes the issue. this.wrapper = document.getElementById("" + this.idContainer); if (this.wrapper) { this.curSpan = this.wrapper.querySelector('#current'); this.viewer = new ImageViewer__default(this.wrapper.querySelector('.image-container')); this.wrapper.querySelector('.total').innerHTML = this.totalImagens; } When this code is run, viewer element is not available and that is why the component is not loading. this.wrapper = document.getElementById("" + this.idContainer); wrapper is null and that breaks the flow. Do you have any clue on this.

Thank you.

[ctaity]

+1