Filtering an array in angular2

by

There is no way to do that using a default pipe. Here is the list of supported pipes by default: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts.

That said you can easily add a pipe for such use case:

import {Injectable, Pipe} from 'angular2/core';

@Pipe({
    name: 'myfilter'
})
@Injectable()
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    }
}

And use it:

import { MyFilterPipe } from './filter-pipe';
(...)

@Component({
  selector: 'my-component',
  pipes: [ MyFilterPipe ],
  template: `
    <ul>
      <li *ngFor="#element of (elements | myfilter:'123')">(...)</li>
    </ul>
  `
})

Hope it helps you,
Thierry

More Related Contents:

  1. TypeScript array to string literal type
  2. Angular2 component’s “this” is undefined when executing callback function
  3. TypeScript Objects as Dictionary types as in C#
  4. Is it possible to filter angular.js by containment in another array?
  5. Defining an array of differing generic types in TypeScript
  6. Defining array with multiple types in TypeScript
  7. Class-validator – validate array of objects
  8. How do I remove an array item in TypeScript?
  9. How to declare a pipe globally to use in different modules?
  10. Typescript says array.pop() might return undefined even when array is guaranteed to contain elements
  11. Nested loops array in Go not behaving like other languages' array
  12. Excel-VBA – Insert new first column in datafield array without loops or API calls
  13. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  14. How do I determine if an array is initialized in VB6?
  15. How do I assign the output of a command into an array?
  16. Detect click outside Angular component
  17. How to pass array as an argument to a function in Bash
  18. Swift 3.0: compiler error when calling global func min(T,T) in Array or Dictionary extension
  19. Updating nested arrays in mongodb
  20. mongodb find by multiple array items
  21. Convert a matrix to a 1 dimensional array
  22. Angular2 – Interaction between components using a service
  23. Why does awk seem to randomize the array?
  24. Assigning an Array Parsed With jq to Bash Script Array
  25. Plain Javascript as Angular 2 service
  26. list items are not deleting properly (React)
  27. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  28. How to return observable from subscribe
  29. Limit input field to two decimal places – Angular 5
  30. How to create and download text/Json File with dynamic content using angular 2+

Leave a Comment