Git Product home page Git Product logo

ngx-search-filter's Introduction


npm npm npm bundle size (minified + gzip) ngx-search-filter PRs All Contributors npm

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

Issues ๐Ÿ›

Found a bug? Want to request a feature? Confused? Or wanna simply comment on how useful this library is?

Open an issue here.

Contributors โœจ

Thanks goes to these wonderful people (emoji key):


Daniel Kreider

๐Ÿ’ป

Ankit Singh

๐Ÿ’ป

This project follows the all-contributors specification.

Contributions of any kind welcome!

License ๐Ÿ“œ

MIT ยฉ dkreider

Credits ๐Ÿงธ

Magnifying glass icons created by Freepik - Flaticon

ngx-search-filter's People

Contributors

dkreider avatar

Stargazers

Joรฃo Marcelo Cunha avatar Wuitoonchi Tecnology avatar  avatar Andre Mesquita avatar Chandan Jnana Murthy avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.