\n\n> Filter arrays\n \nAngular 5+ pipeline for filtering arrays.\n\n
\n \n
\n\n### Demo Page\n\n[https://vadimdez.github.io/ngx-filter-pipe/](https://vadimdez.github.io/ngx-filter-pipe/)\n\nor see demo code\n\n[https://stackblitz.com/edit/ngx-filter-pipe](https://stackblitz.com/edit/ngx-filter-pipe)\n\n### Usage\n\n##### In HTML template\n\n```\n{{ collection | filterBy: searchTerm }}\n```\n\n### Arguments\n\n| Param | Type | Details |\n| --- | --- | --- |\n| collection | `array` | The collection to filter |\n| searchTerm | `string` or `number` or `object` or `array` or `function` | Predicate used to filter items from `collection` |\n\n## Install\n\n```\nnpm install ngx-filter-pipe --save\n```\n*For Angular lower than 5 use version `1.0.2`*\n\n## Setup\n\nIn case you're using ```SystemJS``` - see configuration [here](https://github.com/VadimDez/ngx-filter-pipe/blob/master/SYSTEMJS.md).\n\n## Usage\n\nImport `FilterPipeModule` to your module\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app';\n \nimport { FilterPipeModule } from 'ngx-filter-pipe';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n imports: [BrowserModule, FormsModule, FilterPipeModule],\n declarations: [AppComponent],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n\n```\n\nAnd use pipe in your component\n```ts\nimport { Component } from '@angular/core';\n \n@Component({\n selector: 'example-app',\n template: `\n
\n \n
\n
{{ user.name }}
\n \n \n
No matching elements
\n
\n
\n `\n})\n \nexport class AppComponent {\n users: any[] = [{ name: 'John' }, { name: 'Jane' }, { name: 'Mario' }];\n userFilter: any = { name: '' };\n}\n```\n\n### $or matching\nUse `$or` to filter by more then one values.\n\n`$or` expects an `Array`.\n\nIn your component:\n```ts\n// your array\nconst languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian'];\n// your $or filter\nconst filter = { $or: ['German', 'English'] };\n```\n\nIn your template:\n```html\n
\n {{ language }}\n
\n```\n\nResult will be:\n```html\n
English
\n
German
\n```\n\n#### $or example with nessted values\nIn your component:\n```ts\n// your array\nconst languages = [\n { language: 'English' },\n { language: 'German' },\n { language: 'Italian' }\n];\n\n// your $or filter\nconst filter = {\n language: {\n $or: ['Italian', 'English']\n }\n};\n```\n\nIn your template:\n```html\n
![\"downloads\"](\"https://img.shields.io/npm/dm/ngx-filter-pipe.svg?style=flat\")
\n \n \n \n ![\"downloads\"](\"https://img.shields.io/npm/dm/ng2-filter-pipe.svg?style=flat\")
\n \n \n \n ![\"npm](\"https://badge.fury.io/js/ngx-filter-pipe.svg\"){kind=icon}
\n \n \n \n ![](\"https://david-dm.org/vadimdez/ngx-filter-pipe.svg\")
\n \n \n \n ![\"Greenkeeper](\"https://badges.greenkeeper.io/VadimDez/ngx-filter-pipe.svg\")
\n \n \n \n ![\"PayPal](\"https://img.shields.io/badge/paypal-donate-yellow.svg\"){kind=icon}
\n \n![](\"https://cloud.githubusercontent.com/assets/3748453/23809236/3276cf26-05cd-11e7-94f7-b4078104adbd.gif\")
\n