Categories
BLOG

filter for pipe

Angular 4 Pipe Filter

I am trying to use a custom pipe to filter my *ngFor loop using an input field with ngModel. With my other custom pipe (sortBy), it works perfectly fine. However, the filter pipe seems to make it that none of the data appears. I’m still learning this, and I tried a few variations to no avail:

So I think the problem may lie elsewhere in the code. If anyone can help I’d really appreciate it.

Here is my code:

HTML Component

PIPE

4 Answers 4

Here is a working plunkr with a filter and sortBy pipe. https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

As developer033 mentioned in a comment, you are passing in a single value to the filter pipe, when the filter pipe is expecting an array of values. I would tell the pipe to expect a single value instead of an array

I would agree with DeborahK that impure pipes should be avoided for performance reasons. The plunkr includes console logs where you can see how much the impure pipe is called.

The transform method signature changed somewhere in an RC of Angular 2. Try something more like this:

And if you want to handle nulls and make the filter case insensitive, you may want to do something more like the one I have here:

And NOTE: Sorting and filtering in pipes is a big issue with performance and they are NOT recommended. See the docs here for more info: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Pipes in Angular 2+ are a great way to transform and format data right from your templates.

Pipes allow us to change data inside of a template; i.e. filtering, ordering, formatting dates, numbers, currencies, etc. A quick example is you can transfer a string to lowercase by applying a simple filter in the template code.

List of Built-in Pipes from API List Examples

Example of Angular version 4.4.7. ng version

Filtering the content using a Pipe « json-filter-by.pipe.ts

Add to @NgModule « Add JsonFilterByPipe to your declarations list in your module; if you forget to do this you’ll get an error no provider for jsonFilterBy . If you add to module then it is available to all the component’s of that module.

Angular 4 Pipe Filter I am trying to use a custom pipe to filter my *ngFor loop using an input field with ngModel. With my other custom pipe (sortBy), it works perfectly fine. However, the filter