Angular 7 cdk-virtual-scroll-viewport - virtual scroll

Question

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.

• item
• item
• item

Answer 1

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

read more here and here