Skip to content
𝗩 Angular 5+ pipeline for array filtering.
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Latest commit 600f011 Dec 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs update docs Sep 19, 2018
e2e #77 Oct 19, 2019
src #77 Oct 19, 2019
.editorconfig update ng project Dec 3, 2018
.gitignore #77 Oct 19, 2019
.prettierrc
.travis.yml Update .travis.yml Oct 18, 2019
CHANGELOG.md Update CHANGELOG.md Jun 16, 2019
CONTRIBUTING.md
ISSUE_TEMPLATE.md Create ISSUE_TEMPLATE.md Jan 4, 2018
LICENSE Create LICENSE Sep 15, 2016
README.md Update README.md Dec 3, 2019
SYSTEMJS.md prepare 2.0.0 Feb 8, 2018
angular.json #77 Oct 19, 2019
browserslist #77 Oct 19, 2019
karma.conf.js #77 Oct 19, 2019
package-lock.json chore(package): update lockfile package-lock.json Dec 8, 2019
package.json chore(package): update core-js to version 3.4.8 Dec 8, 2019
public_api.ts
tsconfig.app.json #77 Oct 19, 2019
tsconfig.json #77 Oct 19, 2019
tsconfig.spec.json #77 Oct 19, 2019
tslint.json #77 Oct 19, 2019

README.md

Angular5+ Filter Pipe

downloads downloads npm version Greenkeeper badge PayPal donate button

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

Contribute

License

MIT © Vadym Yatsyuk

You can’t perform that action at this time.