Angular components lose CSS when invoked from Webviewer

Technical Support
1

Product: WebViewer

Product Version: 8.9.0

Please give a brief summary of your issue:
Invoking a custom Angular component from inside the Webviewer causes the component loses CSS and crash.

Please describe your issue and provide steps to reproduce it:
-In wvDocumentLoadedHandler function in webviewer.component.ts, update the contextMenuPopup to include a custom onClick handler that opens an Angular MatDialog.
-The dialog does not open property and the component crashes.

Please provide a link to a minimal sample where the issue is reproducible:
-I’ve attached pictures of the code invoking the dialog, a picture of what the dialog should look like, and a picture of what the dialog looks like when opened in the Webviewer.

dialogbad
dialogbad916×1292 47.5 KB

dialognormal
dialognormal902×1052 31.5 KB

opendialog
opendialog932×434 36.2 KB

2

Hello @andrew.dorgan,

What errors are shown in the console when the app crashes?

In order to investigate this further from our end, we will need a runnable sample. You can fork our Angular demo to set something up we can run.

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.

3

Hi,

There are no errors in the console. The angular dialog becomes unresponsive and clicking outside of it does nothing. I made a fork of your repo that shows when you right click on highlighted text to open the dialog, it renders without CSS and incorrectly. The ‘Cancel’ button also does not function as expected. See here: GitHub - andrewdorganbluestaq/webviewer-angular-sample: Sample to demonstrate integrating WebViewer into Angular

Thanks!

4

Hello andrew.dorgan,

Thank you for providing a sample project, however after performing npm i --legacy-peer-deps
I received this error:

image
image976×162 18.7 KB

It looks like not all the packages that are required are in the package.json?
Can you please verify that the sample is runnable without any global packages.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

5

I added @angular/cdk to the dependencies in the package.json. Try again to see if that works. Thank you!

6

Hello andrew.dorgan,

Looks like you do not have the style being imported for the dialog. In the angular.json add:

"styles": [
              "src/styles.css",
              {
                "input": "node_modules/@angular/material/prebuilt-themes/purple-green.css"
              }
            ]

And the dialog appears overtop.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

7

Thanks! That definitely adds back some styling to the dialog. However, the javascript functionality is still broken. For example, hitting the cancel button does not close the dialog via Angular’s dialog.close() method. Any advice? Thank you!

8

Hi Andrew.dorgan,

I believe this is because this.dialog.close() is being ran outside of the ngZone, you can run it like so:

  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any, private ngZone: NgZone) { }
  
  closeNode(): void {
    this.ngZone.run(()=>{
      this.dialogRef.close();
    })
  }

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron