How to make ng2-pdf-viewer height responsive in angular?

I am working on an Angular 19 project and have created a card component using Angular Material to display information about brochures. Inside this card, I need to display the first page of a PDF using the pdf-viewer component from ng2-pdf-viewer.

The issue I'm facing is with responsiveness:

If I set the height of the pdf-viewer to auto, the content is not displayed at all. If I set a static height, the content is shown, but the design becomes non-responsive and doesn't adapt to different screen sizes. I need the pdf-viewer to dynamically adjust its height based on its content while remaining fully responsive to screen size changes.:

Here’s the HTML template for the card component:

<mat-card class="brochure-card">
<mat-card-content>
<div class="brochure-content">
<pdf-viewer
id="card-pdf-viewer"
[src]="brochurePdfUrl"
[render-text]="false"
[page]="1"
[zoom-scale]="'page-fit'"
[show-all]="false"
[rotation]="0"
[original-size]="false"
[autoresize]="true"
class="pdf-viewer"
(click)="openModal()"
>
</pdf-viewer>
</div>
</mat-card-content>
<hr class="divider" />
<mat-card-footer class="d-flex justify-content-between align-items-center">
<div class="ms-2">
<mat-card-title class="mb-0">{{ brochureTitle }}</mat-card-title>
<p class="text-muted">Active: {{ activeDate }}</p>
</div>
<button class="btn btn-outline-danger mb-2 me-2">
<i class="bi bi-heart"></i>
</button>
</mat-card-footer>
</mat-card>



And here is the scss styles for that component:

.brochure-card {
display: flex;
flex-direction: column;
height: 100%;
}

.pdf-viewer {
height: auto;
min-height: 400px;
overflow: hidden;
}

.mat-dialog-container {
padding: 0px !important;
}

mat-card-content {
height: 100%;
}

.mat-dialog-container {
padding: 0px !important;
}




What I tried:

1. Setting height: auto for the pdf-viewer, which causes the PDF content not to render.
2. Adding a min-height to the pdf-viewer, but this doesn't make it responsive on smaller screens.
3. Using [autoresize]="true" in the pdf-viewer options, but it doesn’t solve the issue.

Continue reading...