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

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?

CodePudding user response：

"just remove bracket like <tr *ngFor="let user of users | searchFilter: filteredString | paginate: { itemsPerPage: resultsPerPage, currentPage: page, totalItems: totalLength }"> "

CodePudding user response：

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.