Angular5+ Filter Pipe

> Filter arrays

Angular 5+ pipeline for filtering arrays.

$3

https://vadimdez.github.io/ngx-filter-pipe/

or see demo code

https://stackblitz.com/edit/ngx-filter-pipe

$3

##### In HTML template

``
{{ collection | filterBy: searchTerm }}
`

$3

| Param | Type | Details |
| --- | --- | --- |
| collection | array | The collection to filter |
| searchTerm | string or number or object or array or function | Predicate used to filter items from collection |

Install

`
npm install ngx-filter-pipe --save
`
For Angular lower than 5 use version 1.0.2

Setup

In case you're using `SystemJS` - see configuration here.

Usage

Import FilterPipeModule to your module

`ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app';

import { FilterPipeModule } from 'ngx-filter-pipe';
import { FormsModule } from '@angular/forms';

@NgModule({
imports: [BrowserModule, FormsModule, FilterPipeModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

`

And use pipe in your component
`ts
import { Component } from '@angular/core';

@Component({
selector: 'example-app',
template:

$or expects an Array.

In your component:
`ts
// your array
const languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian'];
// your $or filter
const filter = { $or: ['German', 'English'] };
`

In your template:
`html


Result will be:
`html


#### $or example with nessted values
In your component:
`ts
// your array
const languages = [
{ language: 'English' },
{ language: 'German' },
{ language: 'Italian' }
];

// your $or filter
const filter = {
language: {
$or: ['Italian', 'English']
}
};
`

In your template:
`html


Result:
`html


`
const objects = [
{ name: 'John' },
{ firstName: 'John' }
]

const filter = { $or: [{ name: 'John' }, { firstName: 'John' }] }
`
In your template:
`html


Result:
`html


Inject FilterPipe into your component and use it:

`ts
class AppComponent {
objects = [
{ name: 'John' },
{ name: 'Nick' },
{ name: 'Jane' }
];

constructor(private filter: FilterPipe) {
let result = this.filter.transform(this.objects, { name: 'J' });
console.log(result); // [{ name: 'John' }, { name: 'Jane' }]
}
}
`

Test

Run tests

`
npm test
``

Contribute

License

MIT © Vadym Yatsyuk