Angular 4 Pipe Filter

by

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

export class FilterPipe implements PipeTransform {
    transform(items: any[], term: string): any {
        // I am unsure what id is here. did you mean title?
        return items.filter(item => item.id.indexOf(term) !== -1);
    }
}

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.

More Related Contents:

  1. NgFor doesn’t update data with Pipe in Angular2
  2. OrderBy pipe issue
  3. Is it possible to use a pipe in the code? [duplicate]
  4. angular keyvalue pipe sort properties / iterate in order
  5. What is an impure pipe in Angular?
  6. How to use pipes in Angular 5 reactive form input
  7. Observable type error: cannot read property of undefined
  8. How to force a component’s re-rendering in Angular 2?
  9. How do I support Internet Explorer in an Angular 8 application?
  10. Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’ (final release)
  11. Is there any lifecycle hook like window.onbeforeunload in Angular2?
  12. Wait for Angular 2 to load/resolve model before rendering view/template
  13. What does the “ng-reflect-*” attribute do in Angular2/4?
  14. How to switch layouts in Angular2
  15. What’s alternative to angular.copy in Angular
  16. How do I navigate to a parent route from a child route?
  17. Set base url for angular 2 http requests
  18. Detect changes in objects inside array in Angular2
  19. Angular2 – Interpolate string with html
  20. Lazy Loading BrowserModule has already been loaded
  21. Angular 2 input parameters on root directive [duplicate]
  22. Unit testing click event in Angular
  23. How to import component into another root component in Angular 2
  24. Angular 4: How to read data from Excel?
  25. Angular 2 how to keep event from triggering digest loop/detection cycle?
  26. How to access host component from directive?
  27. Property ‘toPromise’ does not exist on type ‘Observable’
  28. TypeError: Object prototype may only be an Object or null: undefined Angular 8
  29. How to call scrollIntoView on an element in angular 2+
  30. How do I get experimental ngTemplateOutlet to work?

Leave a Comment