Getting Started

The ready-made viewer gives you a complete PDF experience with a small integration surface. Pick your stack in the sidebar; this page and every example will stay on that integration.

Installation#

Vanilla JavaScript can load the viewer directly from a CDN. Framework projects install their dedicated adapter with pnpm.

pnpm add @embedpdf/angular-pdf-viewer

Add your first viewer#

Give the viewer a PDF URL and a height. The adapter handles the engine, plugins, toolbar, and document lifecycle for you.

import { Component } from '@angular/core';
import { PDFViewer } from '@embedpdf/angular-pdf-viewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PDFViewer],
  template: `
    <pdf-viewer
      [config]="{ src: 'https://snippet.embedpdf.com/ebook.pdf' }"
      style="height: 500px"
      (ready)="onReady($event)"
    />
  `,
})
export class AppComponent {
  onReady(registry: unknown) {
    console.log('PDF viewer ready!', registry);
  }
}

Where to go next#

• Configure the toolbar and available viewer controls.
• Listen to the ready event when you need access to the plugin registry.
• Switch to the Headless docs when you want to build the entire interface yourself.