JS/Angular - figure out how many html-elements are within the width/height of parent element

Question

I am trying to create something like this here: https://www.amazon.de/Meisterwerke-Weltliteratur-Sammlung-internationaler-Meistererzählungen/dp/3839892716/

if you make the width of your browser-window smaller or bigger, you will notice the suffix of the authors-element (which is always one line) will say "X-authors hidden - show all". how can I calculate how many elements/authors are out of the bounds of the authors-parent-element, so I can tell the user how many he can expand by clicking on that suffix?

I use angular 4, but if you know the solution in plain JS, I might be able to translate it.

[EDIT]: I added two screenshots to show the effect, eg "& 16 mehr" and "& 14 mehr" (16 or 14 more in German).

and

Answer 1

Write a directive who will listen to window resize, something like:

@HostListener('window:resize', ['$event'])
onResize(event) {

    const elementHeight = event.target.innerHeight;
    const parentHeight = window.innerHeight;
    const visibleElements = parentHeight / elementHeight;
    const hiddenElements = Math.ceil(elementHeight - visibleElements);
    console.log(hiddenElements);
}