Ng2-pdf-viewer: Component stops rendering when display goes out of view

[tarekis]

When the component leaves the view, hence no longer is visible it will not render correctly, and display only loading spinners as soon as you bring the component into the view, just as in https://github.com/VadimDez/ng2-pdf-viewer/issues/201.
You can then trigger a update (by ViewChild refrence) and the component will update correctly, that is until you'd bring the component out of view again, as it will stop where it currently was when leaving the view.

For reconstruction purposes; i used Angular Material Tabs in a Expansion Panel, and put the component in the second tab.

[JbRezidu]

I have a similar issue here.
Trying to load a pdf from API, the after-load-complete event is well triggered but still have the loading animation...
The pdf is indeed well loaded because i can see the good number of pages but all pages got the loading animation.
I don't know if it is related but firefox shows :

ERROR TypeError: pageView is undefined
Trace de la pile :
_resetCurrentPageView@webpack-internal:///../../../../pdfjs-dist/web/pdf_viewer.js:1556:30
_setCurrentPageNumber@webpack-internal:///../../../../pdfjs-dist/web/pdf_viewer.js:1281:11
set@webpack-internal:///../../../../pdfjs-dist/web/pdf_viewer.js:1858:7
PdfViewerComponent.prototype.renderMultiplePages/<@webpack-internal:///../../../../ng2-pdf-viewer/dist/pdf-viewer.component.js:258:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4816:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28
ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:499:24
ZoneTask/this.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:488:28
timer@webpack-internal:///../../../../zone.js/dist/zone.js:2040:17

in the console whereas chrome shows nothing.
When I override my template and just let the pdf-viewer it's working... (still got the error on firefox though)
@tarekis I would like to try to trigger an update for the pdf viewer but how do you make this with ViewChild ?

[tarekis]

@JbRezidu I'll share you the important bits of my code as a workaround.

Component template:

...
<pdf-viewer
    #pdfViewer
    ...
></pdf-viewer>
...

Component:

// Needed because of https://github.com/VadimDez/ng2-pdf-viewer/issues/219
onStepFocus() {
    if (this.lastSourceUpdated !== this.pdfSrc || this.forceUpdate) {
        this.lastSourceUpdated = this.pdfSrc;
        if (this.pdfSrc !== undefined) {
            try {
                if (this.forceUpdate) {
                    // Force a document load update once
                    this.pdfViewer.lastLoaded = undefined;
                    this.pdfViewer.loadPDF();
                    this.pdfViewer.update();
                    this.forceUpdate = false;
                } else {
                    this.pdfViewer.update();
                }
            } catch (_) {
                // Ignore erros here, because in VERY rare causes this throws an error,
                // when the user clicks instanely fast and triggers this function before the PDF is loaded,
                // which makes it redundant anyways
            }
        }
    }
}

The function is triggered when I focus the md-tab the component is nested in, with forceUpdate you can force a complete reload of the PDF and then re-render it.

[JbRezidu]

@tarekis Thx for the answer, with this.pdfViewer.update() I can see my file now.
But it is really weird, sometimes I don't need the update and 5 minutes later (without changing anything) I need it again... Don't know why...

[castevinz]

@VadimDez It seems to be fixed since the 3.0.4 version... have you change anything about this workaround ?
@tarekis Could you confirm it's fixed since latest version ?
Thx

[castevinz]

Or not... I think the problem is reproductible when the container is smaller than the pdf original width. When I play with options, loading spinners still displayed :

• original-size = false, autoresize = true (preferred config in my app context)
• original-size = true, fit-to-page = false
• original-size = true, fit-to-page = true

When I increase my container size until its max-width, the pdf shows up... the loader spinners disappear when the container width is big enough (even if original pdf width isn't reached).

So strange :-(

[Munmw]

I still gettin this loader spinners after loading is done and able to get the numPages.

Help anybody?

[saithis]

We also got this problem after updating from ng2-pdf-viewer version 2 to version 3. Could it maybe be this change: https://github.com/VadimDez/ng2-pdf-viewer/commit/a96fb1ab3123b5d3f073f623d05eaf5c0741017f (downgrade of pdfjs from 1.9.607 to 1.8.619)

[castevinz]

I've found the solution (rocks in my app with flexbox) : add a "position: relative" on your container children ("div")...
#viewerContainer > div { position: relative; }
@VadimDez, you could add this in your component css file :
.ng2-pdf-viewer-container > div { position: relative; }

[markpeterfejes]

I've found the solution (rocks in my app with flexbox) : add a "position: relative" on your container children ("div")...
#viewerContainer > div { position: relative; }
@VadimDez, you could add this in your component css file :
.ng2-pdf-viewer-container > div { position: relative; }

@castevinz You saved me a couple of hours with this one.

Added this to my global style:

.ng2-pdf-viewer-container > div
{
    position: relative;
}

Component SCSS:

.pdf-viewer
{
    max-width: 300px;
}

And the template:

<pdf-viewer class="pdf-viewer" [src]="receipt.url" [render-text]="false" [original-size]="false" [autoresize]="true" ></pdf-viewer>

And then it was rendering finally after that.

[VadimDez]

Fixed in 6.0.0 See https://github.com/VadimDez/ng2-pdf-viewer/blob/master/CHANGELOG.md#600