Quick start

This guide adds the viewer to your app, then makes it yours in four small steps. Each step works on its own, so stop whenever it’s enough.

1. Install#

install.sh

npm install @embedpdf/viewer-angular@next

The package brings everything: the toolbar and panels, the PDF engine, and its WebAssembly, which your build serves from your own site.

2. Show a PDF#

Give the viewer a document and a height:

first.ts

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

@Component({
  selector: 'app-root',
  imports: [EpdfPdfViewer],
  template: `<epdf-pdf-viewer src="/report.pdf" style="height: 100vh" />`,
})
export class App {}

The viewer fills the box you give it, so it needs a height: a fixed one, 100vh, or the rest of a flex layout. People can now scroll, zoom, search, select text, annotate, fill in forms, sign and download.

3. Make it yours#

The config is plain data, the same in every framework, so keep it in a file of its own. This one uses your brand color, leaves out two features, and adds a button to the toolbar:

viewer-config.js

export const config = {
  theme: { accent: '#7c3aed' },
  disable: ['forms', 'redaction'],
  icons: {
    send: ['M10 14L21 3', 'M21 3l-6.5 18a.5.5 0 0 1-1 0L10 14l-7-3.5a.5.5 0 0 1 0-1L21 3z'],
  },
  commands: [
    {
      id: 'acme:send',
      label: 'Send for signature',
      icon: 'send',
      run: ({ documentId }) => fetch(`/api/send/${documentId}`, { method: 'POST' }),
    },
  ],
  layout: (layout) => layout.add('acme:send', { to: 'main', section: 'end' }),
};

Then give it to the viewer:

customized.ts

import { Component } from '@angular/core';
import { EpdfPdfViewer } from '@embedpdf/viewer-angular';
import { config } from './viewer-config';

@Component({
  selector: 'app-root',
  imports: [EpdfPdfViewer],
  template: `<epdf-pdf-viewer src="/report.pdf" [config]="config" style="height: 100vh" />`,
})
export class App {
  readonly config = config;
}

Loading live preview…

customized.ts

import { Component } from '@angular/core';
import { EpdfPdfViewer, type ViewerConfig } from '@embedpdf/viewer-angular';

const ebook = 'https://snippet.embedpdf.com/ebook.pdf';

@Component({
  selector: 'demo-root',
  imports: [EpdfPdfViewer],
  template: `<epdf-pdf-viewer [src]="ebook" [config]="config" style="height: 100%" />`,
})
export class App {
  readonly ebook = ebook;
  readonly config: ViewerConfig = {
    theme: { accent: '#7c3aed' },
    disable: ['forms', 'redaction'],
    icons: {
      send: ['M10 14L21 3', 'M21 3l-6.5 18a.5.5 0 0 1-1 0L10 14l-7-3.5a.5.5 0 0 1 0-1L21 3z'],
    },
    commands: [
      {
        id: 'acme:send',
        label: 'Send for signature',
        icon: 'send',
        run: () => alert('Sent for signature'),
      },
    ],
    layout: (layout) => layout.add('acme:send', { to: 'main', section: 'end' }),
  };
}

The new button behaves like the built-in ones: it has a tooltip, it moves into the “More” menu when the toolbar runs out of room, and it’s reachable with the keyboard. The icon is 24 × 24 SVG path data, so Tabler and Lucide icons paste in as they are.

A button runs one action. For anything more, such as a status from your app, put your own component in the toolbar. Make room for it in the layout, then give the viewer the component:

component.ts

import { Component } from '@angular/core';
import { EpdfPdfViewer, EpdfToolbarItem, type Layout } from '@embedpdf/viewer-angular';
import { DocumentStatus } from './document-status';

@Component({
  selector: 'app-root',
  imports: [EpdfPdfViewer, EpdfToolbarItem, DocumentStatus],
  template: `
    <epdf-pdf-viewer src="/report.pdf" [layout]="layout" style="height: 100vh">
      <ng-template epdfToolbarItem="status">
        <app-document-status />
      </ng-template>
    </epdf-pdf-viewer>
  `,
})
export class App {
  readonly layout = (layout: Layout) => layout.add({ custom: 'status' }, { to: 'main', section: 'end' });
}

Your component stays part of your app: your CSS styles it, and it reads your app’s state as it always does. The viewer only decides where it goes. See Your own components for menus, panels and the viewer’s look.

5. Talk to the viewer#

onReady gives you the viewer once it’s live. This one searches each document when it opens:

ready.ts

import { Component } from '@angular/core';
import { EpdfPdfViewer, type Viewer } from '@embedpdf/viewer-angular';

@Component({
  selector: 'app-root',
  imports: [EpdfPdfViewer],
  template: `<epdf-pdf-viewer src="/report.pdf" style="height: 100vh" (ready)="onReady($event)" />`,
})
export class App {
  onReady(viewer: Viewer) {
    viewer.documents.onOpened(() => viewer.get('search').search({ text: 'total' }));
  }
}

viewer.get('search') is the search plugin, the same one the headless docs describe. Every feature of the viewer is a plugin you can reach this way, by its name. See The viewer in code.

Next steps#

SetupSizing, server-side rendering, the engine, and several viewers on a page.LayoutToolbars at the bottom, on the side, floating, or several at once.ThemingYour colors, light and dark, and the look of every part.

Was this page helpful?

Your feedback goes directly to the documentation team.