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;