Угловой 4 фильтрующий канал, используемый с разбивкой на страницы

Я использую фильтр с разбивкой на страницы. Он работает нормально, но проблема в том, что когда я ищу по имени, он фильтрует результат, но разбиение на страницы остается таким же, как если бы результат поиска возвращал 3 фильтра, кадры разбивки на страницы отображают страницы, и пользователь может перемещаться по этим страницам. Я хочу изменить свой номер страницы с помощью поискового фильтра. Вот мой пример кода

    <input type = "text" placeholder = "User Name" name = "username" [(ngModel)] = "_userListParams.UserName" class = "form-control">

<pagination-controls (pageChange) = "pageChanged($event)" (pageChange) = "Paging.currentPage = $event"></pagination-controls>

      <table class = "table table-hover">
                            <thead>
                                <tr>
                                    <th *ngFor = "let cell of tableData2.headerRow">{{ cell }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr [routerLink] = "['/UserDetails', row.Id]" *ngFor = "let row of tableData2.dataRows | filter: 'Name':  _userListParams.UserName | paginate: { itemsPerPage: Paging.pageSize, currentPage: Paging.currentPage,totalItems: Paging.totalCount} ;let i = index;">
                                    <td>{{i+1}}</td>
                                    <td>{{row.Name}}</td>
                                    <td>{{row.TypeName}}</td>
                                    <td>{{row.Country}}</td>
                                    <td>{{row.Status}}</td>
                                    <td>{{row.ItemsQty}}</td>
                                    <td><img class = "panel-profile-img" height = "70" width = "70" src = "{{imgurl+row.ProfilePic}}" alt = ""></td>
                                </tr>
                                <tr *ngIf = "tableData2.dataRows.length == 0">
                                    <td colspan = "7" class = "text-center text-danger">No Record Found!</td>
                                </tr>
                            </tbody>
                        </table>

Вот моя трубка, которую я использую

@Pipe({ name: "filter" })
export class FilterPipe implements PipeTransform {
    transform(items: any[],field: string, searchText: string): any[] {
      if (!items) return [];
      if (!searchText) return items;
      searchText = searchText.toLowerCase();
       return items.filter( it => {
           debugger;
        return it[field].toLowerCase().includes(searchText);
      });
     }
  }

Прикрепленное изображение