ngx-search-filter

NgxSearchFilter

This library was generated with Angular CLI version 16.2.0.

Code scaffolding

Run ng generate component component-name --project ngx-search-filter to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-search-filter.

Note: Don't forget to add --project ngx-search-filter or else it will be added to the default project in your angular.json file.

Build

Run ng build ngx-search-filter to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-search-filter, go to the dist folder cd dist/ngx-search-filter and run npm publish.

Running unit tests

Run ng test ngx-search-filter to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

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

ngx-search-filter

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 🌟.

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 © Solodynamo

Credits 🧸

Magnifying glass icons created by Freepik - Flaticon