How to add pdfloaded and pdfpages loaded events so my mat-progress-bar can 'show progress' of a pdf load

[randyparis]

I'm not a well-versed angular user, though I used to be average many iterations ago

I'm getting this error: TS2307: Cannot find module 'ngx-extended-pdf-viewer/lib/events' or its corresponding type declarations.
src/app/app.component.ts:2:32 - I've tried adding an event src to the angular.json, but VSC is telling me "property 'what-ever-I-use' is not allowed".
I want to feed the data to my mat-progress-bar as well as a loading percent message - I see all this working in the showcase, but the two code samples there aren't helping me figure out how those events get instantiated into the component.

here's my app.component -

import { Component } from '@angular/core';
import {PagesLoadedEvent } from './node_modules/ngx-extended-pdf-viewer/lib/events';
import {PdfLoadedEvent } from 'node_modules/ngx-extended-pdf-viewer/lib/events';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  percent='40'
  title = 'ngx-pdf-viewer'
  public messages: Array<string> = [];
  public onPagesLoaded(pagecount: PagesLoadedEvent): void {
    const now = new Date().toLocaleTimeString();
    this.messages.push(`${now} Loaded a document with ${pagecount.pagesCount} pages`);
}
    public onPdfLoaded(pagecount: PdfLoadedEvent): void {
      const now = new Date().toLocaleTimeString();
      this.messages.push(`${now} Loaded a document with ${pagesCount} pages`); 
  }
}

here's my html

<div class="'progressbarstyle">
  <mat-progress-bar [mode]="'buffer'"
    bufferValue="80"
    [value]="percent"
    [color]="'primary'"
    ></mat-progress-bar>
</div>
<ngx-extended-pdf-viewer
  [src]="'assets/WizardsGift_EvilWizardNogolOrig.pdf'"
  (pdfLoadingStarts)="onEvent('pdfLoadingStarts', $event)"
  (progress)="onEvent('onProgress', $event)"
  (pdfLoaded)="onEvent('pdfLoaded', $event)"
  (pdfLoadingFailed)="onEvent('pdfLoadingFailed', $event)" 
  [textLayer]="false"
  [showHandToolButton]="false"
  [showPresentationModeButton]="false"
  [showDownloadButton]="false"
  [showPrintButton]="false"
  [showRotateButton]="false"
  [showScrollingButton]="false"
  [showSecondaryToolbarButton]="false"
  [enableDragAndDrop]="false"
  [enablePrint]="false"
  [showOpenFileButton]="false"
  [zoomLevels]="['auto', 'page-height','page-actual', 'page-fit', 'page-width', 0.5, 1, 1.25]"
></ngx-extended-pdf-viewer>

[stephanrauh]

Sorry for answering late - I've been ill. You'll need to use a shorter import statement:

import {PagesLoadedEvent } from 'ngx-extended-pdf-viewer';
import {PdfLoadedEvent } from 'ngx-extended-pdf-viewer';

I'm sorry for the confusion. Autocompletion frequently suggest the wrong imports in my showcase, and it even works because the source code of the library is part of my showcase project.