@embedpdf/angular

Angular services and components for building your own PDF viewer with EmbedPDF.

Quick start

This guide builds a small PDF viewer: the pages, text people can select, zoom buttons, a highlighter and a save button. Each step adds one plugin or one control, so you can stop at any step and have a working viewer.

1. Install

You need two packages: the one for your framework, and an engine.

npm install @embedpdf/angular @embedpdf/engine

Every feature is a separate import from the framework package, such as @embedpdf/angular/stage, so what you don't use never reaches your bundle.

2. Show a PDF

Create the engine once, then give it to provideEmbedPdf() with the plugins you want and the document to open. <epdf-stage> shows the pages, and <epdf-render-layer> draws each one:

basic.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { EpdfDocumentGate, provideEmbedPdf } from '@embedpdf/angular/runtime';
import type { OpenInput } from '@embedpdf/angular/runtime';
import { EpdfPageTemplate, EpdfStage, withStage } from '@embedpdf/angular/stage';
import { EpdfRenderLayer, withRender } from '@embedpdf/angular/render';
import { localEngine } from '@embedpdf/engine';

// The local engine opens bytes: fetch lazily, under the loading tab.
const welcome = async (): Promise<OpenInput> => {
  const response = await fetch('https://www.embedpdf.com/pdfs/welcome.pdf');
  return { kind: 'bytes', id: 'welcome', bytes: new Uint8Array(await response.arrayBuffer()) };
};

// The component that provides the viewer renders it: the engine is created in the browser,
// and costs nothing until the first document opens, so the page renders at once.
@Component({
  selector: 'demo-root',
  imports: [EpdfDocumentGate, EpdfStage, EpdfPageTemplate, EpdfRenderLayer],
  providers: [
    provideEmbedPdf(
      { engine: () => localEngine(), initialDocuments: [{ source: welcome }] },
      withStage(),
      withRender(),
    ),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div style="height: 500px">
      <!-- Document UI is defined over a document: gate it on having one. -->
      <epdf-stage *epdfDocumentGate="let document; fallback: loading" style="height: 100%">
        <ng-template epdfPage>
          <epdf-render-layer />
        </ng-template>
      </epdf-stage>
    </div>

    <ng-template #loading><p>Loading…</p></ng-template>
  `,
})
export class App {}

localEngine() costs nothing until it's used, so it's safe in your component, even with server-side rendering. The viewer starts it in the browser: PDFium boots in a Web Worker in the background, and the first page shows as soon as the document is open. The engine's WebAssembly is part of your build and loads from your own site; see Setup.

*epdfDocumentGate shows its fallback until the document is open, so the Stage never renders without one.

Every plugin

Each plugin is one import line. Registering a plugin and importing its components come from the same place:

Documentation

• Quick start: Build a PDF viewer step by step, with text selection, zoom buttons, a highlighter and a save button.
• Setup: Server-side rendering, bundlers, fonts, and hosting the engine yourself.
• How it works: Plugins, how your UI talks to them, layers, and which document a component talks to.
• Scroll, zoom & layout: Layouts, zoom modes, page navigation and touch.

License

Apache-2.0