ng2-search-filter - GitLite

KO | EN

gitlite — search

#python #react #ai #typescript #llm #go #android #machine-learning #docker #windows #awesome #pytorch #security #open-source

ng2-search-filter

(★ 146)

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

File Explorer

Download Latest Version (.zip)

- - nodejs.yml
- ng2-filter.module.ts
- ng2-filter.pipe.spec.ts
- ng2-filter.pipe.ts
.editorconfig
.gitignore
.npmignore
index.metadata.json
index.ts
karma-test-shim.js
karma.conf.js
LICENSE
package.json
public_api.ts
README.md
SYSTEMJS.md
tsconfig.json
tslint.json
typings.json
yarn.lock

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd ng2-search-filter

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm i ng2-search-filter --save

Type this command into your terminal and run it.

yarn add ng2-search-filter

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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: `
    <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 = '';
}
```

## 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)