In this tutorial, we’ll learn how to embed and display PDF files in Angular by creating a simple example application using the latest Angular 10 version.

The Portable Document Format (PDF) is a file format developed by Adobe in the 1990s to present documents, including text formatting and images, in a manner independent of application software, hardware, and operating systems.

Now let’s see how to view PDF files in your Angular 10 app by example.

We have two popular options for displaying PDF files in Angular:

• Using the built-in PDF viewer of your browser,
• The PDF viewer of Mozilla and Chrome named pdf.js,
• Using an Angular library like ng2-pdf-viewer or ngx-extended-pdf-viewer.

For keeping things simple, we’ll use the ng2-pdf-viewer library in our example.

Before getting started you need a few prerequisites:

• Basic knowledge of TypeScript. Particularly the familiarity with Object Oriented concepts such as TypeScript classes and decorators.
• A local development machine with Node 10+, together with NPM 6+ installed. Node is required by the Angular CLI like the most frontend tools nowadays. You can simply go to the downloads page of the official website and download the binaries for your operating system. You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.

Note: If you don’t want to install a local environment for Angular development but still want to try the code in this tutorial, you can use Stackblitz, an online IDE for frontend development that you can use to create an Angular project compatible with Angular CLI.

#angular-10 #angular-9 #angular