View PDF files in Angular application
GemBox.PdfViewer can be easily integrated into Angular projects.
First, you need to install GemBox.PdfViewer using NPM or Yarn with one of the following commands:
npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewerAfter that you can use GemBox.PdfViewer in your Angular components. Following example is a basic PDF Viewer component:
import { Component, ViewChild } 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;
constructor() {
GemBoxPdfViewer.setLicense("FREE-LIMITED-KEY");
}
ngAfterViewInit() {
GemBoxPdfViewer.create({
container: this.viewerElement.nativeElement
});
}
}
You can save this component as pdf-viewer.component.js and use it throughout your Angular application as needed:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div>
<pdf-viewer></pdf-viewer>
</div>
`
})
export class AppComponent {
}
