Add div on every page (ngx-extended-pdf-viewer)

Question

I am using the ngx-extended-pdf-viewer and I want to add a div on each page.. It works as expected.. my dom looks like this: (the div with the class="con" was added by me)

Screenshot dom with div

but if I am going to push the zoom button - the added div disappears..

Screenshot dom without div

My Code looks like this:

var div = '<div class="con" style="width:100px; height:100px; Background:#2a2a2a; position: relative; z-index: 1000"></div>';
(document.getElementsByClassName('page')[0]).insertAdjacentHTML('beforeend', div);

Can somebody tell me, how to achieve that the element always stays there? (any advice might help - I am also open for other suggestions to add an div in a pdf-viewer - maybe a other module, or does maybe jQuery help in this situation?)

Answer 1

That's simply not a use-case I had in mind when I created ngx-extended-pdf-viewer. :) However, I assume you can use the (pageRendered) event to achieve your goal. I'm puzzled zooming redraws that HTML code, too. Maybe that's a side-effect of (pageRendered). If not, you'll also want to catch the (zoomChange) event to check if you need to add the div again.