Angular 18 PDF Viewer: Easily Display PDFs using ng2-pdf-viewer

Want to show PDF in Angular without sending users to another tab? You’re in the right place. In this Angular PDF viewer tutorial, you’ll learn how to wire up ng2-pdf-viewer, add a clean toolbar, and load files from assets, from URLs, or user uploads. It’s a practical ng2-pdf-viewer example that you can drop into dashboards, portals, or admin apps. If you’ve ever asked “How to display PDF in Angular?”, this guide will walk you through it step by step.

Here, We’ll start from a fresh Angular 18 app. you can use any existing project to perform this operation.

npm i -g @angular/cli
ng new angular18-pdf-viewer --standalone --routing --style=scss
cd angular18-pdf-viewer
ng serve -o

The ng2-pdf-viewer Library

The ng2-pdf-viewer wraps the pdf.js engine and gives you an Angular PDF component with an Angular‑friendly API. You render PDFs with a single component and get zoom, page navigation, and text selection without extra plumbing. It plays nicely with Angular 18 change detection and works across modern browsers and devices.

You keep control of layout while the library handles the heavy lifting of canvas rendering. For real apps, the viewer shines in dashboards, portals, and admin tools where users preview invoices, policies, or course material. You can load files from assets, secure URLs, or user uploads, then wire up events to track current page or total pages.

npm i ng2-pdf-viewer

If the viewer shows a blank page, copy the pdf.js worker into assets in angular.json and restart the dev server:

{
  "glob": "pdf.worker.min.js",
  "input": "node_modules/pdfjs-dist/build/",
  "output": "assets/"
}

Build a reusable Angular PDF component

Let’s create simple, clean setup using a standalone root component. It loads a PDF from assets and gives you basic controls. Create pages/show-pdf/show-pdf.component.ts file:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PdfViewerModule } from 'ng2-pdf-viewer';

@Component({
  selector: 'app-show-pdf',
  standalone: true,
  imports: [CommonModule, PdfViewerModule],
  templateUrl: './show-pdf.component.html',
  styleUrls: ['./show-pdf.component.scss']
})
export class ShowPdfComponent {
  pdfSrc = 'assets/sample.pdf';
  page = 1;
  totalPages = 0;
  zoom = 1;

  onFileSelected(e: Event) {
    const input = e.target as HTMLInputElement;
    if (input.files && input.files.length) {
      this.pdfSrc = URL.createObjectURL(input.files[0]);
      this.page = 1;
      this.zoom = 1;
    }
  }

  afterLoadComplete(pdf: any) {
    this.totalPages = pdf.numPages;
  }

  prevPage() {
    if (this.page > 1) this.page--;
  }

  nextPage() {
    if (this.page < this.totalPages) this.page++;
  }

  zoomIn() {
    this.zoom += 0.25;
  }

  zoomOut() {
    if (this.zoom > 0.5) this.zoom -= 0.25;
  }
}

The above code will cover component code for showing PDF in angular. Here, you can also see some methods like zoom in and out, next page, previous page functionality. Next thing we need to do is, create HTML file that interact with this. Create pages/show-pdf/show-pdf.component.html and modify as below.

<div class="viewer-wrapper">
  <div class="toolbar">
    <label class="file">
      <input type="file" accept="application/pdf" (change)="onFileSelected($event)">
      <span>Upload PDF</span>
    </label>

    <div class="controls">
      <button (click)="zoomOut()">−</button>
      <span>{{ zoom | number:'1.0-2' }}x</span>
      <button (click)="zoomIn()">+</button>

      <button (click)="prevPage()">Prev</button>
      <span>Page {{ page }} / {{ totalPages || '?' }}</span>
      <button (click)="nextPage()">Next</button>
    </div>
  </div>

  <pdf-viewer
    [src]="pdfSrc"
    [render-text]="true"
    [original-size]="false"
    [zoom]="zoom"
    [page]="page"
    (after-load-complete)="afterLoadComplete($event)"
    style="display:block"
  ></pdf-viewer>
</div>

You can also add SCSS code to improve design and user experience. Add below code to pages/show-pdf/show-pdf.component.scss.

.viewer-wrapper {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.file input[type="file"] {
  display: none;
}

.file span {
  display: inline-block;
  padding: 8px 12px;
  background: #1976d2;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.controls button {
  padding: 6px 10px;
  border: 1px solid #e0e0e0;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

pdf-viewer {
  width: 100%;
  height: calc(100vh - 160px);
  display: block;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fafafa;
}

Let’s add this component to new route which shows PDF upload field and show it with our functionality. Modify app.routes.ts as below:

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'show-pdf', loadComponent: () => import('./pages/show-pdf/show-pdf.component').then(m => m.ShowPdfComponent) }
];

Now you can run this to test functionality using below command:

ng serve -o

It will show output like shown into image.

You can now Display PDF in Angular right inside your app, with zoom and page navigation.

Conclusion

You now have an Angular PDF component that’s fast, responsive, and easy to reuse. With ng2-pdf-viewer, embed PDFs inline, add simple controls, and keep users focused on your app. This Angular 18 PDF viewer setup works great for dashboards, portals, and content-heavy apps looking to show documents without friction.