nsf
ng2-search-filter
npm i ng2-search-filter
nsf

ng2-search-filter

Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, πŸ”₯ 100K+ downloads

by Ankit Singh

0.5.1 (see all)License:MITTypeScript:Built-In
npm i ng2-search-filter
Readme

Angular 2 / Angular 4 / Angular 5 Search Filter Pipe

npm version

Filter search items

Angular 2 filter to make custom search. Works with Angular 4 and Angular 5 too.

demo-image

Install

npm i ng2-search-filter --save
yarn add ng2-search-filter 

Usage

In case you're using systemjs - see configuration here.

Import Ng2SearchPipeModule to your module

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

import { Ng2SearchPipeModule } from 'ng2-search-filter';

@NgModule({
  imports: [BrowserModule, Ng2SearchPipeModule],
  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)]="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" }];
}

Support ng2-search-filter

ng2-search-filter is completely free and open-source. If you find it useful, you can show your support by 🌟 it or sharing it in your social network.

Contribute

Please do πŸ™‚

License

MIT Β© Solodynamo

Downloads/wk

26.1K

GitHub Stars

141

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

5

OPEN ISSUES

17

OPEN PRs

15
VersionTagPublished
0.5.1
latest
4yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate