i am in angular please help to create same bookflip animation in pdf like this
https://www.hktennisopen.hk/files/booklet_2023/
i already used this plugin https://www.npmjs.com/package/ngx-extended-pdf-viewer
and here is my code
<ngx-extended-pdf-viewer
[src]="
'https://malenezi.github.io/malenezi/SE401/Books/Software-Testing-A-Craftsman-s-Approach-Fourth-Edition-Paul-C-Jorgensen.pdf'
"
height="500px"
width="100%"
pageViewMode="book"
[showBorders]="false"
>
</ngx-extended-pdf-viewer>
and here is error š„
app.routes.ts:7 ERROR Error: NG0500: During hydration Angular expected a comment node but found <svg>.
Angular expected this DOM:
<button type="button" role="button" class="toolbarButton" id="primarySidebarToggle" title="ToggleSidebar" data-l10n-id="toggle_sidebar" aria-label="ToggleSidebar">
ā¦
<!-- container --> <-- AT THIS LOCATION
ā¦
</button>
Actual DOM is:
<button type="button" role="button" class="toolbarButton" id="primarySidebarToggle" title="ToggleSidebar" data-l10n-id="toggle_sidebar" aria-label="ToggleSidebar">
<svg style="width:24px;height:24px" viewBox="002424">ā¦</svg> <-- AT THIS LOCATION
</button>
Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.
To fix this problem:
* check the "PdfShyButtonComponent" component for hydration-related issues
* check to see if your template has valid HTML structure
* or skip hydration by adding the ngSkipHydration attribute to its host node in a templatePHKTO2023 - Booklet
PHKTO2023 - Booklet
npm
ngx-extended-pdf-viewer
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.. Latest version: 18.1.14, last published: 11 days ago. Start using ngx-extended-pdf-viewer in your project by running
npm i ngx-extended-pdf-viewer. There are 22 other projects in the npm registry usi...7 Replies
what are you expecting from people based on this question?
i expect some free plugins maybe some tools or some ideas how can i make this effect
@Jochem i tried before this plugin but it's not work perfectly
https://www.npmjs.com/package/ngx-extended-pdf-viewer
npm
ngx-extended-pdf-viewer
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.. Latest version: 18.1.14, last published: 11 days ago. Start using ngx-extended-pdf-viewer in your project by running
npm i ngx-extended-pdf-viewer. There are 22 other projects in the npm registry usi...I have no experience with angular or this type of plugin, but "not working perfectly" isn't something someone can fix for you without a ton of extra information
check out #how-to-ask-good-questions, build it as close as you can get, share your code, and be very specific about what isn't working the way you want it to work
that said, I would personally not recommend using this type of UI. I hate them with a burning passion. They're slow, hard to navigate, probably an accessibility nightmare, and lazy from a design standpoint
could you recommend some free plugins
Sorry, no, I've never used this type of design, or angular.
okay , Thanks