CODEWITHSUNDEEP
angularvirtualscrollangular-cdk-virtual-scroll
Rohit Mehrotra
Rohit Mehrotra

Reputation: 29

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

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?

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

Upvotes: 0

Views: 2350

Answers (2)

Sasi Kumar M
Sasi Kumar M

Reputation: 2630

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');
});

Upvotes: 0

Thierry Falvo
Thierry Falvo

Reputation: 6290

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;

Upvotes: 0

Related Questions