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">
`
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.
ctaity
commented
4 years ago
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">
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.