Create custom channel to filter values using predicate in angular
I would like to create a custom channel in angular 4.x that uses a predicate function as a parameter to filter values from an array.
Here is my pipe code: [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);
}
}
This 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 a function in my component isValid()
and using that function as an argument to 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 like this option because I find it less readable than the arrow one (you need to switch to the component.ts file to figure out what will be filtered in the .html component).
Is there a better solution that looks like snippet # 2?
source to share
There is no better solution. The Angular parser does not support declaring such methods as part of any binding - presumably to prevent people from writing large functions in their templates, since the controller has to adhere to this logic.
I think this use case is closer to the gray area than most, but Angular is stubborn enough in this regard that they won't let you try.
See this for more information: Angular 2 - Bindings cannot contain assignments
source to share