Angular virtual scrolling with dynamic data

I'm trying to use virtual scrolling with dynamic data from service. I used angular mat-tab to show data. When scroll hit at end of the mat-tab, 10 data is brought from service. The thing i want to do is, i just want to show 10 data at start but i also get total data count from database like 1000 datas and scroll size is acting like there are 1000 datas and when i scroll to like half of the screen it show me the data between 500-510.

this.scrollDispatcher.scrolled().pipe(
      filter(event => this.virtualScroll.getRenderedRange().end === this.virtualScroll.getDataLength())
    ).subscribe(event => {
      //@ts-ignore
      let element = event.elementRef.nativeElement;
      
      if (this.isLoading || this.messagingService.isInboxContactGroupsLoading) return;
      
      if (element.classList.contains("contacts-scroll-container") && this.isEndpointContactsEnd) {
        this.ngZone.run(() => {
          this.messagingService.callGetInboxEndpoint();
        });
      } else if (element.classList.contains("contact-groups-scroll-container") && this.isEndpointContactGroupsEnd) {
        this.ngZone.run(() => {
          this.messagingService.callGetInboxContactGroupEndpoint();
        });
      }
      
     
    })