https://github.com/solodynamo/ng2-search-filter

Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, 🔥 1Million+ downloads
https://github.com/solodynamo/ng2-search-filter

angular angular2 angular4 angular5 filter ng2 pipe search

Last synced: 5 months ago
JSON representation

Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, 🔥 1Million+ downloads

• Host: GitHub
• URL: https://github.com/solodynamo/ng2-search-filter
• Owner: solodynamo
• License: mit
• Archived: true
• Created: 2016-12-10T10:23:07.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-07-18T19:30:14.000Z (almost 3 years ago)
• Last Synced: 2025-01-17T19:40:35.213Z (5 months ago)
• Topics: angular, angular2, angular4, angular5, filter, ng2, pipe, search
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ng2-search-filter
• Size: 771 KB
• Stars: 149
• Watchers: 8
• Forks: 40
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angular 2 / Angular 4 / Angular 5 Search Filter Pipe

[![npm version](https://img.shields.io/badge/version-0.4.0-blue.svg)](https://www.npmjs.com/package/ng2-search-filter) [![](https://david-dm.org/solodynamo/ng2-search-filter.svg)](https://www.npmjs.com/package/ng2-search-filter)

[![](https://img.shields.io/badge/downloads-24K%2B-red.svg)](https://www.npmjs.com/package/ng2-search-filter)

> Filter search items

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

![demo-image](http://i.imgur.com/dI5Mzvq.gif)

## Install

```

npm i ng2-search-filter --save

```

```

yarn add ng2-search-filter 

```

## Usage

In case you're using `systemjs` - see configuration [here](https://github.com/solodynamo/ng2-search-filter/blob/master/SYSTEMJS.md).

Import `Ng2SearchPipeModule` to your module

```typescript

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 after declaring and initializing it in your component:

```typescript

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

@Component({

  selector: 'example-app',

  template: `

    


        

        


          


            {{item.name}}

          

        


    
  

  `

})


export class AppComponent {

  items: string[] = [{ name: "archie" }, { name: "jake" }, { name: "richard" }];

  term = '';

}

```

## 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](https://tldrlegal.com/license/mit-license) © [Solodynamo](https://github.com/solodynamo/ng2-search-filter)