Is there any event available with, cdk-virtual-scroll-viewport to find the element in the list is rendered or not. for example while scrolling through a list of like below, is there a way to identify a particular li is rendered or not or a set of new elements are rendered into the DOM.
I think the properties
renderedRangeStream: Observable ~ ListRange ~ => A stream that emits whenever the rendered range changes.
and
@Output() scrolledIndexChange: Observable ~ number ~
on CdkVirtualScrollViewport can help you with this,
or
@Input() cdkVirtualForTrackBy: TrackByFunction ~T~ | undefined
on CdkVirtualForOf
which you can use as the following :
in the class
....
@ViewChild(CdkVirtualForOf) vrlist: CdkVirtualForOf<any>;
@ViewChild(CdkVirtualScrollViewport) vsv: CdkVirtualScrollViewport;
ngAfterViewInit(): void {
this.vrlist.cdkVirtualForTrackBy = function(a) {
console.log(a);
};
this.vsv.scrolledIndexChange.subscribe((n: number) =>
console.log(n));
this.vsv.renderedRangeStream.subscribe((ls: ListRange) =>
console.log(ls.end, ls.start));
}
