Minimal project

[milossramek]

I've studied the PdfShowcase documentation quite thoroughly, but I think I miss something basic. The tutorial on https://pdfviewer.net/extended-pdf-viewer/getting-started starts with

1. Open a terminal and navigate to the root folder of your project.

But which project? I do not have any. Could you please give me some hints how to get a minimal angular project ( I assume I need one) and what to do next?

Thank you in advance for your help Milos

[stephanrauh]

This makes sense. You're right, when I wrote the documentation, I assumed you've already got an Angular project.

Did you already install Angular? If so, you're only one step away:

• Create a project with ng new --standalone false my-favorite-project (replace my-favorite-project by your project name)
• cd my-favorite-project
• ng s -o (you don't need this, but it's good to check if your installation worked)
• Bring the terminal back to the front and hit CTRL+C to stop the server you've started with ng s -o
• ng add ngx-extended-pdf-viewer
• open the app.component.html and replace its contenct by <app-example-pdf-viewer></app-example-pdf-viewer>

If you haven't installed Angular yet, run a quick Google search, but the gist of it is this:

• Install Node.js. Make sure you select an even version number.
• Open the terminal and run npm --version to verify node.js is active.
• Run npm i -g @angular/cli.

As for the --standalone bit in the first step: that's a current bug of my schematics that I'm fixing this evening.

[stephanrauh]

I've already closed the ticket. Nonetheless, if you've still got questions, don't hesitate to tell me.

[milossramek]

Thank you for your super fast response. It works now. Just one more question: How do I specify options? I've tried to add them, as recommended, to <ngx-extended-pdf-viewer ...> but they seem to be ignored (viewer buttons remain the same): <ngx-extended-pdf-viewer [src]="'/assets/pdfs/9zvazok-kok-kra.pdf'"> [textLayer]="true" [showToolbar]="true" [showSidebarButton]="true" [showFindButton]="true" [showPagingButtons]="true" [showDrawEditor]="false" [showStampEditor]="false" [showTextEditor]="false" [showZoomButtons]="false" [showPresentationModeButton]="false" [showOpenFileButton]="false" [showPrintButton]="false" [showDownloadButton]="true" [showSecondaryToolbarButton]="true" [showRotateButton]="false" [showHandToolButton]="true" [showScrollingButton]="false" [showSpreadButton]="false" [showPropertiesButton]="false"> ~

[stephanrauh]

You've got a closing > before the attributes. I guess they are rendered as plain text. :)

[milossramek]

Oh, thank you. A really stupid bug :( They were not rendered as text.

[stephanrauh]

No worries, we've all been there. :)

BTW, when I wrote my answer this noon, I already suspected you don't see the text because it's hidden by the PDF viewer. But more likely than not, the properties have been rendered in the HTML code.

Be that as it may, I'm glad you've solved your issue!

[RitikRajvanshi]

I got error when I simply put this <ngx-extended-pdf-viewer [src]="'/assets/pdf/anypdf.pdf'">, imported as you recommended. First, it shows a "miniature of the page" and shows error NG0500: During hydration, Angular expected a comment node but found

[stephanrauh]

@RitikRajvanshi "Hydration" sounds like server-side rendering. That's a different topic. Can you open a new bug, please, and add a reproducer - i.e. a minimal project I can get up and running in five minutes and that shows the bug?

Thanks in advance, Stephan

[RitikRajvanshi]

I have a question, I want a dynamic value to send or add in textLayer(in search bar) with two-way binding. How I do it here.Also give me an idea how to show document outline in any pdf.

[stephanrauh]

I'm afraid I don't get the question.

• If you want to add an input field to the toolbar or the find bar, use a custom toolbar. That's standard Angular, so you've got two-way binding out-of-the-box.
• If you want to add to two-way binding field to the PDF form, use [(formData)] add a form to the PDF file. In other words, you have to modify the PDF file before opening it in ngx-extended-pdf-viewer.
• If you want to add a two-way binding input field on top of the PDF file without modifying the PDF file itself, you're mostly on you own. You can capture the event (textLayerRendered) or - if there's no text layer - (pageRendered) and use it to add an input field to the DOM. However, that's a standard HTML field, and you have to create it programatically. Angular can't help you. Quite the contrary, Angular isn't aware of any changes of this field, so you have to catch events like onblur or onchange and use the zone.js API to notify Angular. Probably you'll find my article about zone.js useful: https://www.beyondjava.net/zonejs