I would like to create a custom pipe in angular 4.x that takes a predicate function as parameter in order to filter values from an array.
Here is the code of my pipe : [Snippet #1 : mypipe.ts]
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(values: any[], predicate: (any) => boolean): any {
return values.filter(predicate);
}
}
Here is how I use it in my template : [Snippet #2 : mycomponent.html]
<div *ngFor="let item of (items | filter:(x=>x.isValid))">
But at runtime, I get this error : [Snippet #3]
Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Bindings cannot contain assignments at column 44 in [let item of (items | filter:(x=>x.isValid))]
I solved this by creating an isValid() function in my component and using this function as an argument of my filter :
[Snippet #4 : mycomponent.ts]
isItemValid(item): boolean {
return item.isValid;
}
[Snippet #5 : mycomponent.html]
<div *ngFor="let item of (items | filter:isItemValid)">
But I don't really like this option because I think it's less readable than with an arrow function (you have to switch to the component.ts file to understand what will be filtered in component.html).
Is there a better solution that would look like the snippet #2 ?