Integrate CloudPDF inside your Angular App

If you already have an Angular project you want to integrate with CloudPDF, then you can simply add the CloudPDF Javascript library as a dependency to your project. Let's walk through all the steps to get CloudPDF integrated into your project!

Now add CloudPDF as a dependency to your project. Launch the terminal (command prompt or similar on Windows), point it to your project location, and run the following command:

Terminal

yarn add @cloudpdf/viewer

Terminal

npm install @cloudpdf/viewer --save

TypeScript

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import CloudPdfViewer from "@cloudpdf/viewer";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild("viewer", { static: false }) viewer: ElementRef;
  ngAfterViewInit(): void {
    CloudPdfViewer(
      {
        documentId: "eee2079d-b0b6-4267-9812-b6b9eadb9c60",
        darkMode: true
      },
      this.viewer.nativeElement
    ).then((instance) => {});
  }
}

documentId After you upload your document to CloudPDF you will receive a documentId. How to upload a document?
darkMode You can set the viewer to light or dark mode by changing this variable to true or false

To view all the options go to viewer options

Live Demo

Integrate CloudPDF inside your Angular App

1. Add CloudPDF as a dependency

Using Yarn

Using NPM

2. Render CloudPDF