ng2-pdfjs-viewer

To install and configure, check the npm package here: ng2-pdfjs-viewer

Github source: ng2-pdfjs-viewer
Access source of this entire demo here: ng2-pdfjs-viewer Demo

Events

html


<!-- your.component.html -->
<ng2-pdfjs-viewer pdfSrc="gre_research_validity_data.pdf" viewerId="MyUniqueID" (onBeforePrint)="testBeforePrint()" (onAfterPrint)="testAfterPrint()" (onPagesLoaded)="testPagesLoaded($event)">
</ng2-pdfjs-viewer>

typescript

For events to work properly, you should set viewerId. This helps event routing to understand which component the event is to be sent to, even if there are more than one ng2-pdfjs-viewer component in the page.
Please click on the print button/icon to emit print related events.

<!-- your.component.ts -->
public testBeforePrint() {
    console.log("testBeforePrint() successfully called");
}

public testAfterPrint() {
    console.log("testAfterPrint() successfully called");
}

public testPagesLoaded(count: number) {
    console.log("testPagesLoaded() successfully called. Total pages # : " + count);
}
Note: All physical pdf files such as 'gre_research_validity_data.pdf' and 'pdf-sample.pdf' should be in application's 'assets' folder or public folder.

This demo is built using @MarkPieszak's aspnetcore-angular-universal repo(aspnetcore-angular-universal). It is one of the best new project templates I found for aspnetcore+angular projects.