How to render a component on scroll in Angular?

Question

Angular

I have a page with many components. I would like to offload work with the DOM and draw only the top components first and draw the next ones on scroll.
How is it convenient to do it?
What will be the behavior if a person stood in the middle of the page when reloading the page and the upper components are drawn immediately or only when scrolling?

Answer 1

It's very simple - track the scroll through the HostListener or, as I did pagination with the scroll, use the IntersectionObserver API and do not show the invisible part of the content when initializing the page through *ngIf. When using IntersectionObserver, set transparent pixel-by-pixel blocks in the layout (this is a must - it won't work with zero height) between your sections on the page and, just like *ngIf, change the flag when scrolling to true. And in order to stay in the same place in Angular when you reboot, you need to use the hash in the URL and scroll along it in the same way until the moment where the user stopped. Here I even wrote two ways to choose from - but in both you can’t do without structural directives - the difference is in the ways to control the scroll.