Multiple pipes simultaneously in Angular 2

Question

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.

Intellectualize

Have you tried to call first the sortTableRow then the sortTable ? Have you got errors in your console ? A snippet could be useful here to help you faster – Highsmith

Yeah! but didn't work. Console shows no error. – Intellectualize

I don't think this approach, using pipes to sort is a good idea. You should take care of that in the component and not use pipes, I think this setup will do a filter on every detection cycle. The filter should be done once and not setup in this manner. But if you decide to do this, good luck. – Fuller

with pure pipe, the filter function will be called only once each time the data or the filter parameter is changed, and never more. because a pure pipe result must depend only of it's argument. – Cavanagh

Answer 1

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

Confiscable

Answer 2

You can apply the pipe using pipe sign. like

<div class="checkbox" *ngFor="let value of brand | filter: {name: searchbrand} | itemdisplayno: displayitems; let i = index">

here i m using two pipe. one is calles filter with pass value second is itemdisplayno. Basically first apply the filter with pass value then run the itemdisplayno.

Stria

Answer 3

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.

`<tr *ngFor="let row of (rows | searchTableRow : searchTerm : ['name']) | sortTable: sortType : {'key': key, 'dt': dt}">`

Coadjutor