How to track the scroll event of individual cdk-virtual-scroll-viewport

Question

I am using cdk-virtual-scroll-viewport to build pagination scroll in my app. I have two instances of cdk-virtual-scroll-viewport, Want to track individual scroll events and make API call for the individual scrolls. How to achieve that?

Stackblitz URL https://stackblitz.com/edit/angular-cdk-programatically-scroll-uqgvpu?file=app%2Fcdk-virtual-scroll-fixed-buffer-example.html

Answer 1

Just use @ViewChild with each component selector.

First in HTML template, declare a template variable for each component, by using hash symbol and name on component tag :

<cdk-virtual-scroll-viewport #cmp1 itemSize="50".../>

Then use @ViewChild decorator in order to query component, and be able to reference it inside code :

@ViewChild('cmp1') cmp1: CdkVirtualScrollViewport;

Answer 2

Once we register virtual scroll child inventory element

@ViewChild(CdkVirtualScrollViewport, { static: false })

We can subscribe on the elementScrolled observable,

this.cmp1.elementScrolled()
   .subscribe(event => {
    console.log('scrolled');
});