ngx-filter-pipe

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';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, FormsModule, 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

Changelog

3.0.0 - 16.05.2024

• [#154] - Update to Angular 17 & Ivy
• [#153] - Impossible to use in Angular 16