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
<tr *ngFor="let row of (rows | sortTable: sortType : {'key': key, 'dt': dt}) | searchTableRow : searchTerm : ['name']">
if not try to set console.log in each pipe and watch what they return