Angular 9 CDK infinite scroll load more data using scrolledIndexChange

Question

I am trying to perform an infinite scroll using cdk's virtual scroll component but not getting any success.

I am using scrolledIndexChange to load more data as index change but this index is constant. The value of the index is not changing

Thank you in advance

.html

<cdk-virtual-scroll-viewport  itemSize="100" (scrolledIndexChange) ="index($event)"   >

 <li  *cdkVirtualFor="let item of infinite; trackBy: trackByIdx" > 
     {{item.purchase_stock_id}}

 </li>
</cdk-virtual-scroll-viewport>

.ts

index(val) {

    console.log(val)
    this.page ++ ;
    if(this.page == this.total_pages) {
      console.log("finished")
      return
    }      
    const end = this.viewport.getRenderedRange().end;      
    const total = this.viewport.getDataLength();      
    console.log(`${end}, '>=', ${total}`);               
        if(end === total) {             
         this.getdata(this.limit, this.skip)            
        }

     } 


getdata(limit, skip){

    this.FactService.getdata(limit, skip).subscribe(data =>{
      if(data){
        console.log(data);
        this.infinite = this.infinite.concat(data)
        }
    })
  }