How the make PDF fit the height - ng2-pdf-viewer

Question

I am using ng2-pdf-viewer in my Angular 8 application.

I would like to show the PDF fit to the height of the container regardless of the width. So, PDF must take all of the height as we can do by selecting Page Fit from the zoom option in Mozilla's PDF (link here):

Here is what I have got right now:

My code for ng2-pdf-viewer is:

            <pdf-viewer
            [src]='"./assets/images/userFiles/" + file.fileName'
            [original-size]="false"
            [render-text]='false'
            [show-all]="false"
            style="display: block; height: 100%;"
            (after-load-complete)='afterLoadComplete($event)'
            (page-rendered)='pageRendered($event)'
            (pageChange)='pageChange($event)'

            ></pdf-viewer>

I have tried countless things for days to get this working. fit-to-page, giving height to all of the containers and much more.

Let me know, what is the best way to get it done

Answer 1

Use [fit-to-page]="true" option to fit the PDF in the page.

<pdf-viewer
   [src]='"./assets/images/userFiles/" + file.fileName'
   [original-size]="false"
   [render-text]='false'
   [show-all]="false"
   style="display: block; height: 400px;"
   (after-load-complete)='afterLoadComplete($event)'
   (page-rendered)='pageRendered($event)'
   (pageChange)='pageChange($event)'
   [fit-to-page]="true">
</pdf-viewer>

It should work with combination of [original-size]="true".

Answer 2

Another approach which not the best one to fix my issue, as the others not working with me.

1- You need to get notified when rendering of the pdf is done

<pdf-viewer
.....
 (page-rendered)="pageIsRendered()>
</pdf-viewer>

2- You need to select the element with the class 'ng2-pdf-viewer-container' And change style.

3- Apply the style 'display:contents' on the selected element when pdf is rendered.

Like that:

pageIsRendered() {
    this.elementRef.nativeElement.getElementsByClassName('ng2-pdf-viewer-container')[0].style.display = 'contents';
}

No other solutions worked for me, After a long search, I've fixed it in this way.