How to find the count of items in an ngFor after the pipes have been applied

Question

I have an ngFor creating rows in a table that is both filtered and paged.

Answer 1

I came across the same problem, although @bixelbits 's answer was approved, but I didn't find it ideal, specially for large data.

Instead of returning the original array in each element, I believe it's better just avoid Pipes for this problem, at least with the current Angular 2 implementation (rc4).

A better solution would be using normal component's function to filter the data, something likes bellow:

// mycomponent.component.ts  
filter() {
  let arr = this.data.filter(
      // just an example
      item => item.toLowerCase().includes(
        // term is a local variable I get it's from  
        this.term.toLowerCase()
      )
    );
  this.filteredLength = arr.length;
  return arr;
}

Then, in the template:

  
 
    {{ el | json }}
  

// mycomponent.component.html
 There are {{ filteredLength }} element(s) in this page

Unless you really want to use Pipes, I would recommend you to avoid them in situations like the above example.