How to get the size of a filtered (piped) set in angular2

You still must call the filter a second time but you can use it directly like this :

{{ (customerData | myFilter:searchTerm)?.length }}

original

AFAIK there is currently no way to do this directly. A hack would be to add a template variable to the content and use a ViewChildren(...) query to get the created items and count them.

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar>  ...</tr><div>count: {{filteredItems?.length}}</div>

@ViewChildren('someVar') filteredItems;

An alternative approach would be to pass a reference to a counter variable to the pipe like shown in https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview

update (Angular >=4.0.0)

Since Angular 4 *ngFor supports as

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result">

which you can use in the template (inside the element that *ngFor is added to) like

  <div>{{result?.length}}</div>

Gunter answer is in the right direction, it lacks only the info on how to use the result out of the *ngFor loop. One possible solution is to enclose the *ngFor in a wider directive, like the following:

<ng-directive *ngIf='customerData | myFilter:searchTerm as filteredItems'>   <tr *ngFor="let singleCustomerData of filteredItems">   ...   </tr>   <div>count: {{filteredItems.length}}</div></ng-directive>

Credits for this hint go to the following post:

https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213