Angular 18 how to display injected file with ngx-extended-pdf-viewer

I'm currently stuck with the pdf view using ngx-extended-pdf-viewer (version 24.2.4). I'm currently using material dialogs and passing the file to it, from one dialog to another.

<div class="pt-3">
<button class="button-background w-100" mat-raised-button [disabled]="!selectedFile" (click)="onPreviewHandler()">
<mat-icon>search</mat-icon>
<span>view</span>
</button>
</div>

onPreviewHandler() {
if (this.selectedFile) {
this.dialog.open(PdfPreviewDialogComponent, {
data: this!.selectedFile,
height: "90vh",
width: "80vw"
})
}
}


Once the PdfPreviewDialogCompionent is ready, the pdf file is not showed, but only the commands are visible. Here is the component with an example image.

<ngx-extended-pdf-viewer
[src]="pdfSrc"
useBrowserLocale="true"
[height]="'auto'"
[textLayer]="true"
[showHandToolButton]="true"
></ngx-extended-pdf-viewer>

export class PdfPreviewDialogComponent {
pdfSrc: Blob;

constructor(@Inject(MAT_DIALOG_DATA) public data: File) {
const blob = new Blob([this.data], { type: "application/pdf" });
this.pdfSrc = blob;
}
}


viewer error

I'm not getting any error in the console or during the build. I also tried to download the generated blob and it is correctly downloaded.

Continue reading...