PDF Viewer

Name: ng-oat
Author: SashiKumar Yadav

Embeds a full-featured PDF viewer powered by EmbedPDF. Automatically syncs with the ng-oat theme when syncTheme is enabled.

Input	Type	Default	Description
`src`	`string`	`''`	URL or path to the PDF document
`height`	`string`	`'600px'`	CSS height of the viewer container
`syncTheme`	`boolean`	`true`	Auto-sync with ng-oat's light/dark theme
`theme`	`NgOatPdfThemeConfig`	`undefined`	Manual theme config (ignored when syncTheme is true)
`config`	`NgOatPdfViewerConfig`	`undefined`	Full EmbedPDF config override

Output	Type	Description
`viewerReady`	`EmbedPdfContainer`	Emits the container instance after initialisation

Import & Usage

typescript

import { Component } from '@angular/core';
import { NgOatPdfViewer } from '@letsprogram/ng-oat/pdf-viewer';

@Component({
  selector: 'app-example',
  imports: [NgOatPdfViewer],
  template: `
    <ng-oat-pdf-viewer
      src="https://example.com/doc.pdf"
      height="600px" />
  `,
})
export class ExampleComponent {}

Basic (theme-synced)

Toggle the site theme (top-right) — the PDF viewer follows automatically.

html

<ng-oat-pdf-viewer
  src="https://snippet.embedpdf.com/ebook.pdf"
  height="500px" />

Fixed Dark Theme

html

<ng-oat-pdf-viewer
  src="https://snippet.embedpdf.com/ebook.pdf"
  height="400px"
  [syncTheme]="false"
  [theme]="{ preference: 'dark' }" />

Dynamic Source

html

<ng-oat-pdf-viewer [src]="pdfSrc()" height="400px" />

// In component class:
pdfSrc = signal('https://snippet.embedpdf.com/ebook.pdf');