ngconf-search

NgxSearch Library

This project was generated with Angular CLI version 10.0.5.

Search Feature for Angular.

Demo Link

Stackblitz Demo

Step - 1

npm i ngconf-search --save
NPM Package Link

import NgconfSearchModule in app.module.ts file.
app.module.ts

import {NgconfSearchModule} from 'ngconf-search';
 imports: [
    NgconfSearchModule
  ]

Step - 2

Declare two global variables term,prop in app.component.ts file.
term is to for binding search term of user.
prop is for search based on specific property of array. app.component.ts

 testArray:any = [];
 term:any = "";
 prop:any = "";

app.component.html

<input type="text" [(ngModel)]="term" [value]="term" placeholder="Search">
<div *ngIf="testArray.length>0">
   <div *ngFor="let item of testArray | searchFilter: { term: term, prop: prop }" >
      {{item.name}} || {{item.phno}} 
   </div>
   
</div>

Argument Configuration

Prop can be left with empty string if you want search based on all fields. If you want search based on specific field a dropdown can be binded to prop
and result change according to user input to dropdown.

export interface opt {
  term: string;
  prop: string;
}

That's it you are good to go. Happy Coding :)