Filter arrays
Angular 2+ pipeline for filtering arrays. Modified version of Vadimdez
https://vadimdez.github.io/ng2-filter-pipe/
npm install ng2-filter-pipe-modified --save
In case you're using systemjs
- see configuration
here.
Import Ng2FilterPipeModule
to your module
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app";
import { Ng2FilterPipeModule } from "ng2-filter-pipe";
@NgModule({
imports: [BrowserModule, Ng2FilterPipeModule],
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: stringFilter).length === 0">No matching elements</li>
</ul>
</div>
`
})
export class AppComponent {
users: any[] = [{ name: "John" }, { name: "Jane" }, { name: "Mario" }];
userFilter: any = { name: "" };
}
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>
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>
Run tests
npm test