title: How to implement pageSize change in Infinite row Model in ag-grid?
body: <p>I am using ag-grid-community in angular 6. I have set suppressPaginationPanel=true and using Material paginator for handling paginator events. For row Model, I am using Infinite row model. My pagination next and previous is working correctly with server side call with below url.</p>
  
  <p><a href="https://myservice.com/clients?pageIndex=0&amp;pageSize=5" rel="nofollow noreferrer">https://myservice.com/clients?pageIndex=0&amp;pageSize=5</a>;</p>
  
  <p>But my page size change is not working. I have implemented this in Material paginator pageChange event. <strong>After changing pageSize, this actually goes into infinite loop and getRows is called infinite time.</strong></p>
  
  <p>I have also tried some other options like paginationPageSizeChange(), paginationGoToFirstPage() etc. But none is working. </p>
  
  <p>I require server side call each time when pageSize change or next/previous is clicked.</p>
  
  <p>Could anyone please guide how to implement pageSize change with infinite row model of ag-grid?</p>
  
  <pre class="lang-js prettyprint-override"><code> export class ClientsComponent implements OnInit {
  
        gridOptions: GridOptions = &lt;GridOptions&gt;{};
        gridApi: GridApi;
        columnApi: ColumnApi;
        clientQuery= {
          pageIndex: 0,
          pageSize: 5,'
        };
  
        columnDef = [
          {field: 'ClientName', headerName:"Cline Name", suppressMenu: true},
      {field: 'ServerName', headerName: "Server Name", suppressMenu: true},];
  
        @ViewChild(MatPaginator) paginator: MatPaginator;
  
        constructor(private service: MyService) {
        }
  
        ngOnInit() {
          this.gridOptions.pagination = true;
          this.gridOptions.rowModelType = 'infinite';
          this.gridOptions.paginationPageSize = 5;
          this.gridOptions.cacheBlockSize = 5;
          this.gridOptions.maxBlocksInCache = 1;
          this.gridOptions.suppressPaginationPanel = true;
          this.gridOptions.infiniteInitialRowCount = 5;
        }
  
        gridReady(event: GridReadyEvent){
          this.gridApi = event.api;
          this.columnApi = event.columnApi;
          event.api.setDatasource(this.dataSource);
        }
  
        dataSource: IDatasource = {
          rowCount: null,
          getRows: params =&gt; {
            this.service.getAllClients(this.clientQuery).toPromise().then(data =&gt; {            
                this.paginator.length = data.totalRecords;
                params.successCallback(data.items, data.totalRecords);
            })
          }
        }
  
        pageChange(event: PageEvent) {  //this is material paginator pageChange event
          if(event.pageSize !== this.clientQuery.pageSize){
            //this is page size change block;
            this.clientQuery.pageSize = event.pageSize;
            this.clientQuery.pageIndex = 0;
            this.gridOptions.cacheBlockSize = event.pageSize;
            this.gridOptions.paginationPageSize = event.pageSize;
            this.gridApi.paginationGoToPage(0);
          } else {
            this.clientQuery.pageIndex = event.pageIndex;
            this.gridApi.paginationGoToPage(event.pageIndex);
          }
        }
  
      }
  
  
  
  
  </code></pre>