Angular 2 filter/search list

by

Search by multiple fields

Assuming Data:

items = [
  {
    id: 1,
    text: 'First item'
  },
  {
    id: 2,
    text: 'Second item'
  },
  {
    id: 3,
    text: 'Third item'
  }
];

Markup:

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>

Pipe:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

One line for everything!

More Related Contents:

  1. Angular 2 – how round calculated number?
  2. Angular/RxJS When should I unsubscribe from `Subscription`
  3. Dynamically add event listener
  4. What is the equivalent of ngShow and ngHide in Angular 2+?
  5. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  6. Can’t bind to ‘ng-forOf’ since it isn’t a known native property [duplicate]
  7. How to use `trackBy` with `ngFor`
  8. Angular and Typescript: Can’t find names – Error: cannot find name
  9. How to make an angular module to ignore http interceptor added in a core module
  10. Angular 2 restrict input field
  11. How to share data between components using a service properly?
  12. Angular 2 Form “Cannot find control with path”
  13. Angular 4 Pipe Filter
  14. Angular 4 validator to check 2 controls at the same time
  15. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  16. Multiple layouts for different pages in Angular 2
  17. Multiple conditions in ngClass – Angular 4
  18. angular4 httpclient csrf does not send x-xsrf-token
  19. How do I get the absolute path of the current page in Angular 2?
  20. How to use variable to define templateUrl in Angular2
  21. Behaviour subject initial value null?
  22. Change Detection issue — Why is this changing when it’s the same object reference with On Push
  23. How to reset form validation on submission of the form in ANGULAR 2
  24. Angular 4 Lazy loading with named router-outlet not working
  25. Angular routerLink does not navigate to the corresponding component
  26. How to mock Angular 4.3 httpClient an error response in testing
  27. How to add multiple headers in Angular 5 HttpInterceptor
  28. Angular 6 – how to mock router.events url response in unit test
  29. Angular5: Deploying Angular application to multiple clients
  30. Cypress 12.8.1 not working with Stripe Elements iframe

Leave a Comment