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

Question

I wrote my own filter pipe as it disappeared in angular2:
import {Pipe, PipeTransform} from 'angular2/core';
#Pipe({
name: 'myFilter'
})
export class MyFilter implements PipeTransform {
transform(customerData: Array<Object>, args: any[]) {
if (customerData == undefined) {
return;
}
var re = new RegExp(args[0]);
return customerData.filter((item) => re.test(item.customerId));
}
}
And use it in my template:
<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm">
...
</tr>
Now I'd like to see how many matches the pipe returns. So essentially the size of the returned array.
In angular 1.x we were able so assign the returned set to a variable in a template like so:
<div ng-repeat="person in filtered = (data | filter: query)">
</div>
But we can no longer assign variables in templates in angular2.
So how do I get the size of the filtered set without calling the filter twice?

Answer 1

You still must call the filter a second time but you can use it directly like this :
{{ (customerData | myFilter:searchTerm)?.length }}

Answer 2

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>

Answer 3

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

Answer 4

I don't know what you exactly want to do with the size and the Günter's solution can fit your needs.
That said, you can inject the component instance into your pipe and set directly the length into a property of this component.
#Pipe({
name: 'dump'
})
export class DumpPipe {
constructor(#Inject(forwardRef(() => AppComponent)) app:AppComponent) {
this.app = app;
}
transform(array: Array<string>, args: string): Array<string> {
(...)
this.app.filteredItemLength = array.length;
return array;
}
}
#Component({
(...)
})
export class AppComponent {
(...)
}
See this answer:
How to save model manipulation of *ngFor with pipes? - "#item of (result = (items | orderAsc))" doesn't work in A2.
Hope it helps you,
Thierry

Answer 5

You can simply pass an object from the class component to HTML-pipe as the second argument. And in the class pipe pass the resulting array.