Angular how to display Blob with ngx-extended-pdf-viewer

Question

I know there was already a question about this but the answer was "use something else" and I don't want to.

in my app I need to display PDFs and I can't put them manually into the assets folder each time, I retrieve them from a server and get them as Blobs, now I read the documentation and I should be able to bind them to the src property but something isn't working, here's my code:

import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer';
pdfToPreview?:Blob

getDocPreview(){
    this.myService.getDocPreview().subscribe(data =>{
    this.pdfToPreview = data;
    })
  }

and here's the html:

 <button data-bs-toggle="modal" data-bs-target="#provaPdfStaticModal (click)="getDocPreview()">
 viewer
 </button>

<div class="modal fade" id="provaPdfStaticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel2" aria-hidden="true">
        <div class="modal-dialog modal-dialog-mod modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel2">PROVA PDF</h5>
                    <button type="button" class="btn-close nosha" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div *ngIf="pdfToPreview != undefined">
                        <ngx-extended-pdf-viewer
                        [src]="pdfToPreview" 
                        [showPrintButton]="false"
                        [showBookmarkButton]="false"
                        [showOpenFileButton]="false" 
                        [showSidebarButton]="true"
                        >
                        </ngx-extended-pdf-viewer>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    FOOTER
                </div>
            </div>
        </div>
    </div>

this is what I'm getting

Am I dong something wrong?

Answer 1

couldn't get that stuff to work but it only took this whatever it is:

<object type="application/pdf"
   [data]="pdfToPreview | safe"
   width="500px"
   height="500px">
</object>

had to make my blob a base 64 string, the pipe safe is to sanitize the value otherwise I get a security error

Answer 2

in service.ts

getDocPreview() {
return this.http.get('this.'url',{responseType:'blob'} )
  }`