How can i use dearflip jquery plugin in angular app

Question

I have a website written with Angular and I want to use the DearFlip jQuery plugin to read PDF files as flipbooks.

I have tried to include the plugin in my application's index.html like so:

I added the script source in index.html. It works fine when I put this line in index.html:

<div id="flipbook" class="_df_book"  source="assets/pdf/assouka_mag.pdf">pdf</div>

But it doesn't work when I try to use it in a component which was loaded by <router-outlet>.

Why not? How can I achieve this?

Answer 1

Try contacting their support as it's a paid product.

As you did not attach any errors or details that would help understanding what "doesn't work" actually means, I would guess that plugin inits before the content appears on the page.

jQuery plugins are usually meant for static websites. This means that they self-intialize when a page is loaded and it has all the required HTML elements in place upon load. This is not the case for SPAs, because when the scripts are loaded there is no HTML at the time. Therefore, all the initialization doesn't pick anything up.

I did not find in the documentation any functions to init at a specific time. This is what you would want to do in Angular. When the page is initialized and has rendered its content ngAfterViewInit call this plugin intialization hook.

Another solution would be to stick with Angular-centric or pure JS libraries. jQuery doesn't go well with Angular. If it's possible to find Angular library - stick with it. Fallback to JS libraries as they require less code to work (as they don't depend on jQuery) and usually have API which allows for some customizations.

Answer 2

Firstly you need to understand that the rendering of a PDF in a flipbook is not a view of the real PDF here on the right is the download of original PDF, Where we can see it has Book Like "spreads", and that is exactly what a client would see in a PDF reader.

So flip books are script driven bitmaps from JPEGs, made to look like a copycat PDF reader. Often done by dice up pages into images. In the better ones they add a text layer for searching. Best of the range would be one that emulates adding flipping annotations too.

This makes for a more complex installation, than simply offer a download to a viewer. For that reason it is usually commercial but there are actually hundreds for free that work well, in the "better" category.

Same as any other answer as this is a commercial offering, you should get the support from the vendor.