How to Handle Page Render Events in Angular PDF Viewer

14 Aug 20261 minute to read

In the PDF Viewer, the pageRenderInitiate and pageRenderComplete events fire during the page rendering life cycle:

  • pageRenderInitiate: fired when the rendering of a page begins. Use this event to initialize resources, show loading indicators, or set up rendering parameters before the page content is drawn.
  • pageRenderComplete: fired when the rendering of a page finishes. Use this event to hide loading indicators, record render timing, or run post-render processing.
<ejs-pdfviewer #pdfViewer id="pdfViewer"
               [serviceUrl]='service'
               [documentPath]='document'
               (pageRenderInitiate)='pageRenderInitiate($event)'
               (pageRenderComplete)='pageRenderComplete($event)'
               style="height:640px;display:block">
</ejs-pdfviewer>
public pageRenderInitiate(args: any): void {
  // This method is called when the page rendering starts
  console.log('Rendering of pages started');
  console.log(args)
}

public pageRenderComplete(args: any): void {
  // This method is called when the page rendering completes
  console.log('Rendering of pages completed');
  console.log(args)
}

The provided code demonstrates how to subscribe to the pageRenderInitiate and pageRenderComplete events in the PDF Viewer component.

View sample in GitHub