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?
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