PDF Viewer

The NgStarter Angular PDF Viewer component renders PDF documents inline with EmbedPDF Core and PDFium. Use it for contracts, invoices, reports, statements, manuals, policy documents, attachments, and document review surfaces where a PDF should stay inside the current Angular layout.

PDF Viewer accepts a URL, Blob, ArrayBuffer, or Uint8Array source, initializes the EmbedPDF engine through @embedpdf/core, renders pages as browser-safe object URLs, and exposes loading, error, loaded, page changed, and page rendered states. Its built-in shell uses ngs-panel regions with a left page preview list for quick navigation. Configure wasmUrl to point at the copied pdfium.wasm asset in your application.

Prop	Type	Default
src PDF source to render. Accepts a URL string, Blob, ArrayBuffer, Uint8Array, null, or undefined.	string \| Blob \| ArrayBuffer \| Uint8Array \| null \| undefined	null
documentName Document name shown in the built-in toolbar. Falls back to the source filename when omitted.	string \| null	null
wasmUrl URL for the PDFium WebAssembly file used by EmbedPDF.	string	/assets/embedpdf/pdfium.wasm
page Initial or controlled page number. Values are clamped to the loaded document page range.	number	1
scale Initial or controlled render scale. A value of 1 equals 100%. Values are clamped between minScale and maxScale.	number	1
minScale Minimum zoom scale. The default 0.2 equals 20%.	number	0.2
maxScale Maximum zoom scale. The default 60 equals 6000%.	number	60
zoomStep Amount added or removed by the built-in zoom controls.	number	0.1
maxRenderPixels Maximum bitmap pixel budget for a rendered page. Keeps high zoom levels responsive by capping PDFium raster output.	number	128000000
maxRenderDimension Maximum bitmap width or height for a rendered page. The layout can keep zooming while raster output is capped.	number	13000
renderAll Render every page when true. Render only the active page when false.	boolean	true
showToolbar Show built-in page navigation and zoom controls.	boolean	true
showPageList Show the left page list inside the viewer panel.	boolean	true
showSearchPanel Enable the right search panel opened from the toolbar search button.	boolean	true
showAnnotationsPanel Enable the right annotations panel built with ngs-panel-aside.	boolean	false
annotations Client-side annotation items rendered in the right annotations panel. Prefer annotationsDataSource for configurable sources.	PdfViewerAnnotationView[]	[]
annotationsDataSource Annotation source for client or server data. Accepts an array, Promise, Observable, loader function, or object with getAnnotations.	PdfViewerAnnotationDataSource \| null	null
annotationTypeProperty Annotation field used when ngsPdfViewerAnnotationWhen is a string.	string	type
searchQuery Initial query shown when the search panel opens.	string	''
withAnnotations Render PDF annotations when supported by the document.	boolean	true
withForms Render interactive form widgets when supported by the document.	boolean	true

Event	Description
loaded	Emitted after the PDF document opens. PdfViewerLoadedEvent
pageChanged	Emitted when built-in controls or the main document scroll change the active page. number
pageRendered	Emitted after a page render completes and an object URL with display dimensions is created. PdfViewerPageRenderedEvent
error	Emitted when the PDF engine, document load, or render operation fails. unknown

Directive	Description
ngsPdfViewerAnnotation	Projects a custom annotation template inside ngs-pdf-viewer. Template directive
ngsPdfViewerAnnotationWhen	Optional string or predicate that decides when the projected annotation template should be used. string \| (annotation, index) => boolean

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

PDF Viewer

Source code, templates, and commercial support

Build the surrounding workflow