Angular PDF viewer
Display PDFs in your Angular applications

GemBox.PdfViewer is a customizable JavaScript UI library for building an Angular PDF viewer that lets you display PDF files in your Angular web applications with just a few lines of code. A large set of features like search, text selection, print, digital signing, saving, navigation, and custom theme support adds the look and feel of standalone PDF applications to your Angular applications.

How to add the PDF Viewer to your Angular application?

1. Install GemBox.PdfViewer

To add GemBox.PdfViewer to your Angular application using NPM or Yarn, use the following commands:

npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer

2. Create the reusable Angular PDF Viewer component

Now you can use GemBox.PdfViewer in your Angular components. The following example is a basic PDF Viewer component that displays an existing PDF file:

import { Component, ViewChild, Input, } from '@angular/core';
import { GemBoxPdfViewer } from '@gembox/pdfviewer';
import '@gembox/pdfviewer/dist/es/pdfviewer.css';

@Component({
  selector: 'pdf-viewer',
  template: `
    <div #viewerElement class="viewer"></div>
  `,
  styles: [`
    .viewer {
      width: 600px;
      height: 350px;
    }
  `]
})

export class PdfViewerComponent {
  @ViewChild('viewerElement', { static: false }) viewerElement;
  @Input() initialDocument = null;

  constructor() {
    GemBoxPdfViewer.setLicense("FREE-LIMITED-KEY");
  }

  ngAfterViewInit() {
    GemBoxPdfViewer.create({
      container: this.viewerElement.nativeElement,
      initialDocument: this.initialDocument
    });
  }
}

You can save this component as pdf-viewer.component.js and use it throughout your Angular application as needed.

3. Display PDF files in your Angular app

To display existing PDF documents you can use the Angular component created in the previous step:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- Initializes PDF Viewer with a HelloWorld.pdf file -->
      <pdf-viewer [initialDocument]="'/HelloWorld.pdf'"></pdf-viewer>

      <!-- Shows empty PDF Viewer -->
      <!-- <pdf-viewer></pdf-viewer> -->
    </div>
  `
})
export class AppComponent {
}

Demo

The following live demo demonstrates the GemBox.PdfViewer in action:

Desktop Demo
Mobile Demo

What next?

GemBox.PdfViewer will allow your users to read existing PDF files directly in your Angular applications using an Angular PDF viewer. Check the other examples for more information about GemBox.PdfViewer's rich set of features and customizations that will allow you to tailor the PDF viewer to your specific requirements.

Next steps

GemBox.PdfViewer is a JavaScript library that enables you to show PDF files seamlessly in your web applications.

Download Buy

Angular PDF viewerDisplay PDFs in your Angular applications