Angular pagination with filter pipe doesn't work after applying filter

Question

Using Angular 14.0.5, ngx-pagination and a filter pipe, inside a table I have this code to show the table rows:

<tr *ngFor="let user of (users | searchFilter: filteredString) |
  paginate: {
    itemsPerPage: resultsPerPage, 
    currentPage: page,
    totalItems: totalLength
  }">
  <th scope="row">{{ user.id }}</th>
  <td>{{ user.name }}</td>
  <td>{{ user.email }}</td>
</tr>

When I only one of the two mechanics it works perfectly fine, but when I add the filter pipe it shows all the table rows at the same time. If I switch the order it also doesn't work, and if I take the searchFilter pipe out of the brackets it also doesn't work. Any ideas on why this isn't working and how to fix it?

Answer 1

just remove bracket like

  paginate: {
    itemsPerPage: resultsPerPage, 
    currentPage: page,
    totalItems: totalLength
  }">

Answer 2

The problem was happening because I wasn't updating the "totalLength" value of the pagination after filtering the results, causing this bug.

  paginate: {
    itemsPerPage: resultsPerPage, 
    currentPage: page,
    totalItems: totalLength
  }

So to solve this, whenever the user inputted something on the search/filter input I just called a function that updated the totalLength , making the bug disappear.