ngx-pagination doesn't works fine with Filtering table

Question

I got simple table where I implemented filtering option by local_part everything works fine until I am not trying to search into table when I am for exaple on the last page. If I am on first page I can find everyting but when I for example on the 20th page it searching but I got blank rows ( and pagination shows that I got only 1 page ( so it's correct ) When I am clicking on my pagination [1] then I see filtered data)

For Filtering I am using ngx-filter-pipe and for pagination ngx-pagination

My input to searching into table

<input class="form-control form-control-alternative" placeholder="Szukaj aliasu" type="text [(ngModel)]="queryString.local_part">

My table row

<tr *ngFor="let aliases of alias | filterBy: queryString | paginate: { itemsPerPage: 10, currentPage: p }; let i = index">

My pagination controls

<pagination-controls 
  (pageChange)="p = $event" 
  directionLinks="true" 
  autoHide="false"
  responsive="true" 
  previousLabel="Prev" 
  nextLabel="Next">
</pagination-controls>

How should it be? I want to filter my table no matter which page I am on.

Answer 1

This may not be an ultimate solution, but in my project, I created a custom object as 'config' for declaring the pagination properties as a workaround:

config: any;
ngOnInit() {
 this.config = {
 itemsPerPage: 6,
 currentPage: 1,
 };
}

And now in the HTML change as following:

*ngFor="let aliases of alias | filter: queryString | paginate: config"

on the input of the search bar just add click event as follows:

(click)="config.currentPage = 1"

It will look something like this:

<input matInput (click)="config.currentPage = 1" placeholder="Ex. City Data" #input [(ngModel)]="queryString">

This resolved my issue. Hope it helps.