How to add filter to ngx- bootstrap pagination?

Question

This code is regarding ngx-bootstrap pagination. I want search items in this.

<table class="table  transactionhistory_table" id="myTable">
    <thead>
        <tr class="transactionhistory_table_tr">
            <th>REFERENCE ID</th>
            <th>RECHARGE AMOUNT</th>
            <th>TOTAL AMOUNT</th>
            <th>BOOKING TYPE</th>
            <th>TRANSACTION TYPE</th>
            <th>DATE</th>
            <th>STATUS</th>
        </tr>
    </thead>
    <tbody id="operatorName"*ngFor="let data of returnedArray | filter:filter">
       <tr>
          <td class="transactionhistory_table_tr_td">{{data.transactionId}}</td>
          <td class="transactionhistory_table_tr_td">{{data.rechargeAmount}}</td>
          <td class="transactionhistory_table_tr_td">{{data.walletAmount}}</td>
          <td class="transactionhistory_table_tr_td">{{data.bookingType}}</td>
          <td class="transactionhistory_table_tr_td">{{data.transactionType}</td>
          <td class="transactionhistory_table_tr_td">{{data.createdDate}}</td>
          <td class="transactionhistory_table_tr_td">{{data.transactionStatus}}</td>
       </tr>    
</tbody>
</table> 

 </div>
        <div class="col-xs-12 col-12 no-padding">
        <span class="pagination_class">
<p class="page_no">({{startVal}}-{{endVal}} of {{walletTransactionsCount}})</p>
        <div class="pagination_class">
    <!-- <pagination-controls   previousText="&lsaquo;" nextText="&rsaquo;" (pageChanged)="pageChanged(p=$event)"></pagination-controls>  -->
        <pagination [boundaryLinks]="true" [totalItems]="walletTransactionsCount"   previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" (itemsPerPage)="3" (pageChanged)="pageChanged($event)" [maxSize]="5"></pagination>
        </div> 
    </span> 
</div>

I want to filter the table with pagination I have used ng2searchpipe module but its filter only one TR not all data.

pageChanged(event: PageChangedEvent): void {
        event.itemsPerPage = 3;
        const startItem = (event.page - 1) * event.itemsPerPage;
        const endItem = event.page * event.itemsPerPage;
        this.startVal = startItem + 1;
        this.endVal = endItem;
        this.returnedArray = this.walletTransaction.slice(startItem, endItem);
}

Answer 1

I have used a different approach to achieve this. I have not used the conventional filter pipe rather i have implemented filter method on search model change to filter out data from raw array and stored in contentArray. Then I have called the pageChange method to effect data with pagination. My code is as follows:

HTML:

<input type="text" placeholder="Search" [(ngModel)]="filterSearchData" (ngModelChange)="changeSearchFilter($event)" />

Componenet:

changeSearchFilter(filterText: string) {
    this.contentArray= this.rawDataList.filter((dataItem: any) =>
        dataItem.guestName.toLowerCase().includes(filterText.toLowerCase())
    );

    this.pageChanged({
        page: 1,
        itemsPerPage: this.pageItems
    });
    this.cd.detectChanges();
}

pageChanged(event: PageChangedEvent): void {
    const startItem = (event.page - 1) * event.itemsPerPage;
    const endItem = event.page * event.itemsPerPage;
    this.returnedArray = this.contentArray.slice(startItem, endItem);
  }