Ngx-search-filter NPM

ngx-search-filter

Important Note: This is a fork of ng2-search-filter that has now been archived. Many thanks to Ankit and all the other contributors.

A lightweight Angular search filter pipe. You can use it with ngFor to filter arrays of strings of objects.

If you find this library useful, please give it a 🌟.

demo-image

Install ⌛️

npm i ngx-search-filter --save

yarn add ngx-search-filter

Usage 🧲

Import NgxSearchFilterModule to your module

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';

import { NgxSearchFilterModule } from 'ngx-search-filter';

@NgModule({
  imports: [
    BrowserModule, 
    NgxSearchFilterModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

And use pipe in your component after declaring and initializing it in your component:

import { Component } from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    <div>
        <input type="text" [(ngModel)]="term">
        <div *ngFor = "let item of items | filter:term" >
          <p>
            {{item.name}}
          </p>
        </div>

    </div>  
  `
})

export class AppComponent {
  items: string[] = [{ name: "archie" }, { name: "jake" }, { name: "richard" }];
  term = '';
}