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?
In Angular 1, we had filter which helped format, sort or transform how data was displayed in our templates. Filters can be used with a binding expression or a directive. In Angular 2, we have a similar feature but renamed to Pipes. This rename was to better align of what the feature does.
Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.
By using the advantage of chaining, we can use two different pipes for the same property or column.
You still must call the filter a second time but you can use it directly like this :
{{ (customerData | myFilter:searchTerm)?.length }}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With