[Solved] PDF Viewer - How to remove current PDF documents

2 Answers 7 Views

PDFViewer

Kalli Kaldi asked on 01 Apr 2026, 03:37 PM

Hi all.

I'm using kendo-pdfviewer and loading it with a PDF I get from a web service. The web service takes query parameters and returns a PDF as a Byte[] and I turn that into a base64 string and put that in the viewer. Basic stuff ;) Here's the element from my HTML:

        <kendo-pdfviewer style="height: 800px" [data]="pdfSrc" [tools]="pdfViewerTools">
          <app-pdfviewer-messages></app-pdfviewer-messages>
          <ng-template kendoPdfViewerBlankPageTemplate>
            <div class="blank-template">No data</div>
          </ng-template>
        </kendo-pdfviewer>

Now, if i.e. the user has a PDF in the viewer and wants to narrow the data with some extra parameters, and that result returns an empty PDF, I need to remove the previous PDF from the viewer.

I've tried to set [data] to null and undefined but that does not work. Any suggestions ?

Best regards,
Kalli Kaldi

2 Answers, 1 is accepted

answered on 06 Apr 2026, 07:03 AM

Hi Kalli,

When you set [data] to null or undefined, the component doesn't detect this as a meaningful change to act on — it only reacts to new, truthy data values. As a result, the previously rendered PDF stays displayed, and the blank page template never gets a chance to show.

As a workaround, you can toggle the visibility of the component with @if (or *ngIf). This way, the component can be destroyed and recreated again (with the empty template):

https://stackblitz.com/edit/angular-e4ziucgx

I will discuss this case with the team to see if we can provide any method or other approach to better clear the PDFViewer-loaded PDF.

Regards,
Martin Bechev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.