I am using Syncfusion Grid (Angular) to display data(Infinite Scroll). I am getting the data from an API response through observable. At first, 50 data will be loaded, and then when the user scrolls, APIs will be called repeatedly to populate the grid with new data. If the user scrolls from bottom to top, no API will be called as those data are already received. Here is my code:

#component.ts


searchRepositories(): void {
  this.service.executeRepositories(this.params);
}

dataStateChange(state: DataStateChangeEventArgs): void {
  console.log('Called');
  // this.service.executeRepositories(state);
}

#component.html

<ejs-grid 
  [dataSource]='repositories | async' 
  height='400' 
  [pageSettings]='pageSettings'
  [enableInfiniteScrolling]='true'
  (dataStateChange)= 'dataStateChange($event)' >
  <e-columns>
    <e-column field='name' headerText='Name' width='150'></e-column>
    <e-column field='description' headerText='Description' width='200'></e-column>
    <e-column field='language' headerText='Language' width='100'></e-column>
    <e-column field='stargazers_count' headerText='Stars' width='100'></e-column>
    <e-column field='updated_at' headerText='Last Updated' width='150' format='yMd'></e-column>
    <e-column field='owner.login' headerText='Owner' width='100'></e-column>
    <e-column field='html_url' headerText='URL' width='150'></e-column>
  </e-columns>
</ejs-grid>

#Service Class

@Injectable({
    providedIn: 'root'
})
export class Service extends Subject<DataSourceChangedEventArgs> {
    constructor(private http: HttpClient) { 
        super();
    }

    getData(apiEndpoint: string, params?: any): Observable<any> {
        return this.http.get(environment.apiUrl + apiEndpoint, {
            params: new HttpParams({fromObject: params}),
        });
    }

    executeRepositories(pState: any): void {
        this.getRepositories(pState).subscribe(pResponse => super.next(pResponse as DataSourceChangedEventArgs));
    }

    getRepositories(pState?: any): Observable<any> {
        return this.getData(Endpoints.search_repositories, pState).pipe(map((response) => ({
            result: pState.per_page > 0 ? response['items'].slice(0, pState.per_page) : response['items'],
            count: response['items'].length
        })));
    }
}

The first 50 data are loaded. But when I scroll, API is not called further and dataStateChange() function is not called either. What am I missing here? What should I do?