Notoriously Punctual Manatee
    Have ideas to improve npm?Join in the discussion! »

    ngx-filter-pipe
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    Angular5+ Filter Pipe

    downloads downloads npm version

    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 Default 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';
     
    @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 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>

    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

    Install

    npm i ngx-filter-pipe

    DownloadsWeekly Downloads

    11,496

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    59.1 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar