I am working on an Angular 2 project.
I have a table with multiple columns. Every column has different logic for sorting (number, string.lowercase, amountValue in % and INR). Rows are sorted on the basis of sorting logic of that column. To acheive this, I am using a custom pipe named sortTable with few arguments.
At the same time, there is an input field at the top that binds to searchTerm variable. To filter the data with searchTerm, I am using another custom pipe named sortTableRow.
Although it is very complicated, a very simplified snippet can be:
<input type="search" [(ngModel)]="searchTerm"/>
<table>
<thead>
<tr class="sortable-header">
<th data-key="status" data-dt="boolean">Status</th>
<th data-key="name" data-dt="string">Name</th>
<th data-key="code" data-dt="string">Code</th>
<th data-key="amountValue" data-dt="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows | sortTable: sortType : {'key': key, 'dt': dt} | searchTableRow : searchTerm : ['name']">
<td> {{row.status}} </td>
<td> {{row.name}} </a> </td>
<td> {{row.code}} </td>
<td> {{row.amountValue}} </td>
</tr>
</tbody>
</table>
Both pipes work fine individually. When I click on column header, key and dt(dataType) gets changed on a click event handler and rows get sorted accordingly. When I search for a term, results get filtered and I see desired output.
But when I try to sort the FILTERED RESULTS (by searchTerm), nothing happens. I think in this case, two pipes not working simultaneously. I don't want to remove any of these pipes.
hm... very strange. may be this help
if not try to set console.log in each pipe and watch what they return
This is happening because you first sort the list and then apply filtering. To fix it just simply move the filter pipe before sorting pipe in your html code.