Angular5+ Filter Pipe
Filter arrays
Angular 5+ pipeline for filtering arrays.
Demo Page
https://vadimdez.github.io/ngx-filter-pipe/
Install
npm install ngx-filter-pipe --save
For Angular lower than 5 use version 1.0.2
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:
const languages = ['English', 'German', 'Russian', 'Italian', 'Ukrainian'];
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:
const languages = [
{ language: 'English' },
{ language: 'German' },
{ language: 'Italian' }
];
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);
}
}
Test
Run tests
npm test
License
MIT © Vadym Yatsyuk