Integrate WebViewer with Angular

1import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
2import WebViewer from '@pdftron/webviewer';
3
4@Component({
5  selector: 'webviewer',
6  templateUrl: './webviewer.component.html',
7  standalone: true
8})
9export class WebViewerComponent implements AfterViewInit {
10  @ViewChild('viewer') viewer!: ElementRef;
11
12  constructor() { }
13
14  ngAfterViewInit(): void {
15    WebViewer({
16      path: '../../lib/webviewer',
17      licenseKey: 'your_license_key', // sign up to get a free trial key at https://dev.apryse.com
18      initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf'
19    }, this.viewer.nativeElement).then(instance => {
20      
21      const { documentViewer, Annotations, annotationManager } = instance.Core;
22
23      instance.UI.openElements(['notesPanel']);
24
25      documentViewer.addEventListener('annotationsLoaded', () => {
26        console.log('annotations loaded');
27      });
28
29      documentViewer.addEventListener('documentLoaded', () => {
30        const rectangleAnnot = new Annotations.RectangleAnnotation({
31          PageNumber: 1,
32          // values are in page coordinates with (0, 0) in the top left
33          X: 100,
34          Y: 150,
35          Width: 200,
36          Height: 50,
37          Author: annotationManager.getCurrentUser()
38        });
39        annotationManager.addAnnotation(rectangleAnnot);
40        annotationManager.redrawAnnotation(rectangleAnnot);
41      });
42
43    })
44  }
45}