ngx-filter-pipe

Angular2+ Filter Pipe

Filter arrays

Angular 2+ pipeline for filtering arrays.

Demo Page

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

Install

npm install ngx-filter-pipe --save

Usage

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

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:

<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>

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

Changelog

2.0.0

• [#51] - Restructure
• [#42] - AOT support
• [#44] - Angular 5

Breaking change

Bundle location is changed, therefore SYSTEMJS config should be updated

Append to map

var map = {
    ...
    'ngx-filter-pipe': 'node_modules/ngx-filter-pipe/bundles'
}

and then add to packages

var packages = {
    ...
    'ngx-filter-pipe': { defaultExtension: 'js' }
}