Angular5+ Filter Pipe
Filter arrays
Angular 5+ pipeline for filtering arrays.
Demo Page
https://vadimdez.github.io/ngx-filter-pipe/
or see demo code
https://stackblitz.com/edit/ngx-filter-pipe
Usage
In HTML template
{{ collection | filterBy: searchTerm }} Arguments
| 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
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app'; import { FilterPipeModule } from 'ngx-filter-pipe'; @NgModule({ imports: [BrowserModule, FilterPipeModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} And use pipe in your component
import { Component } from '@angular/core'; @Component({ selector: 'example-app', template: ` <div> <input type="text" [(ngModel)]="userFilter.name" placeholder="name"> <ul> <li *ngFor="let user of users | filterBy: userFilter">{{ user.name }}</li> <!-- in case you want to show empty message --> <li *ngIf="(users | filterBy: userFilter).length === 0">No matching elements</li> </ul> </div> ` }) export class AppComponent { users: any[] = [{ name: 'John' }, { name: 'Jane' }, { name: 'Mario' }]; userFilter: any = { name: '' }; }$or matching
Use $or to filter by more then one values.
$or expects an Array.
In your component:
// your array const languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian']; // your $or filter const filter = { $or: ['German', 'English'] };In your template:
<div *ngFor="let language of languages | filterBy: filter"> {{ language }} </div>Result will be:
<div>English</div> <div>German</div>$or example with nessted values
In your component:
// your array const languages = [ { language: 'English' }, { language: 'German' }, { language: 'Italian' } ]; // your $or filter const filter = { language: { $or: ['Italian', 'English'] } };In your template:
<div *ngFor="let object of languages | filterBy: filter"> {{ object.language }} </div>Result:
<div>English</div> <div>Italian</div>$or example with multiple predicates
const objects = [ { name: 'John' }, { firstName: 'John' } ] const filter = { $or: [{ name: 'John' }, { firstName: 'John' }] } In your template:
<div *ngFor="let object of objects | filterBy: filter"> {{ object | json }} </div>Result:
<div>{ name: 'John' }</div> <div>{ firstName: 'John' }</div>Use FilterPipe in a component
Inject FilterPipe into your component and use it:
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 License
MIT © Vadym Yatsyuk
