ng2-filter-pipe-modified

Angular2+ Filter Pipe modified

Filter arrays

Angular 2+ pipeline for filtering arrays. Modified version of Vadimdez

Demo Page

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

Install

npm install ng2-filter-pipe-modified --save

Usage

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: "" };
}

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

Test

Run tests

npm test

License

MIT © Ralph Janssen