ngx-datatable Configurable Paging Parameter

Question

I am building a datatable with ngx-datatable and activated Paging with [limit]="10" for example. This works fine. However, I want to make the Entries per Page configurable through the Visitor.

So I added a variable to the controller:

pageSize: number = 10; // defaults to 10

Moreover I created an Item Component (is an own component of mine)

<form-item
    name="pageSize"
    [(value)]="pageSize"
    (change)="table.recalculate()"
></form-item>

<ngx-datatable
      #table ...

which creates a:

<input type="text" name="pageSize" [ngModel]="value">

Now, this does not work as intended. The initial value sets to 10. When I change it, the onchange callback has a mysterious delay?!. It does not react the same every time. The table.recalculate() gets fired correctly, but if I switch to the next page, the additional data gets appended to the table instead of replacing the data from the previous page.

Can someone help me, what am I missing?

Answer 1

It should be ngModelChange instead of change

<form-item
    name="pageSize"
    [value]="pageSize"
    (ngModelChange)="table.recalculate()"
></form-item>