joserfjuniorllms / ng2-filter-pipe

Angular 2 pipeline for filtering arrays.

Angular2 Filter Pipe

Filter arrays

Angular 2 pipeline for filtering arrays.

Demo Page

Install

npm install ng2-filter-pipe --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)]="stringFilter">
        <ul>
          <li *ngFor="let item of array | filterBy: stringFilter"></li>
          
          <!-- in case you want to show empty message -->
          <li *ngIf="(array | filterBy: stringFilter).length === 0">No matching elements</li>
        </ul>
    </div>  
  `
})
 
export class AppComponent {
  array: string[] = ['one', 'two', 'three', 'four'];
  stringFilter: string = '';
}

Test

Run tests

npm test

License

MIT © Vadym Yatsyuk