How to filter entire table with pagination?

Question

I have a table with pagination and a search-box.

The current code below searches the entire table (i.e. data from page 1, 2, 3, 4 etc.) only while the user is on Page 1 of the table and returns correct results.

Issue

If I navigate to page 2, 3, 4 etc. I see the data but as soon as I start typing in the search box, no results are returned with my search term. Not sure why but I suspect it is the slice in ngFor, could be very wrong though. Any help is appreciated.

Expected

I want to be able to search the entire table from any page of the table, not just page 1.

Customer HTML

 <div class="row">
    <div class="col">
        <div class="card shadow">
            <div class="card-header border-0">
                <h3 class="mb-0">Customers</h3>
                <div class="search-bar-wrapper">
                    <form class="navbar-search form-inline mr-3 d-none d-md-flex ml-lg-auto">
                        <div class="form-group mb-0">
                            <div class="input-group input-group-alternative">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                </div>
                                <input id="searchInput" class="form-control" [formControl]="filter" placeholder="Search" type="text">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table align-items-center table-flush" id="customersTable">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Contact Email</th>
                            <th scope="col">Package</th>
                            <th scope="col">Subscription</th>
                            <th scope="col">Active</th>
                            <th scope="col">Customer Since</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let cust of customers$ | async | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
                            <td class="primaryColumn">
                                {{cust.name.S}}
                            </td>
                            <td>
                                {{cust.email.S}}
                            </td>
                            <td>
                                {{cust.package_name.S}}
                            </td>
                            <td>
                                {{cust.subscription_name.S}}
                            </td>
                            <td [ngClass]="{
              'active' : cust.sub_status.BOOL == true,
              'inactive' : cust.sub_status.BOOL == false
           }">
                                {{cust.sub_status.BOOL}}
                            </td>
                            <td>
                                {{cust.date_created.S}}
                            </td>
                            <td class="text-right">
                                <div ngbDropdown placement="bottom-right">
                                    <a class="btn btn-sm btn-icon-only text-light" ngbDropdownToggle>
                                        <i class="fas fa-ellipsis-v"></i>
                                    </a>
                                    <div ngbDropdownMenu class=" dropdown-menu-right dropdown-menu-arrow">
                                        <a class="dropdown-item" (click)="selectCustomer(cust);openForm(custUpdate)"><i class="fas fa-edit"></i><span class="menu-option">Edit</span></a>
                                        <a class="dropdown-item" (click)="selectCustomer(cust);openForm(custDelete)"><i class="fas fa-trash"></i><span class="menu-option">Delete</span></a>
                                    </div>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="card-footer py-4">
                <button id="create" class="btn btn-primary" (click)="openForm(custCreate)">Create</button>
                <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="customers.length" [boundaryLinks]="true" [maxSize]="5"></ngb-pagination>
            </div>
        </div>
    </div>
</div>

Customer TS

export class CustomerComponent implements OnInit {    
customers:any;
page= 1;
pageSize= 10;

customers$: Observable<any>;
filter = new FormControl('');

constructor(private dataService: DataService, private modalService: NgbModal, private 
customerService: CustomerService, private numberService: NumberService, 
private filterService: FilterService, private formBuilder: FormBuilder,  private 
ngbDateParserFormatter: NgbDateParserFormatter, private _snackBar: MatSnackBar, pipe: DecimalPipe) {
  this.customers$ = this.filter.valueChanges.pipe(
    startWith(''),
    map(text => this.search(text, pipe))
  );
}

search(text: string, pipe: PipeTransform): any {
  return this.customers.filter(customer => {
    const term = text.toLowerCase();
    return customer.name.S.toLowerCase().includes(term)
 });
 }

}

UPDATED SEARCH FUNCTION

search(text: string, pipe: PipeTransform): any {
return this.customers.filter(customer => {
  if (customer.length < (this.page-1) * this.pageSize + this.pageSize) {
    this.page++;
  }
  const term = text.toLowerCase();
  return customer.name.S.toLowerCase().includes(term)
});

}

Answer 1

Please try like this one more time.

search(text: string, pipe: PipeTransform): any {
if(!text) {
  return this.customers;
}

  const filterdCustomers = this.customers.filter(customer => {
    const term = text.toLowerCase();
    return customer.name.S.toLowerCase().includes(term)
  });

  if (filterdCustomers.length < (this.page-1) * this.pageSize + 
  this.pageSize) {
    this.page = 1;
  }

  return filterdCustomers;

}