View PDF files in Angular applications

GemBox.PdfViewer is a customizable JavaScript UI component that enables you to easily 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 will add 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 PDF Viewer

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 PDF Viewer in action:

Desktop Demo
Mobile Demo

What next?

GemBox PDF Viewer will allow your users to read existing PDF files from your Angular applications. 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