0.0.8 • Published 4 years ago
ng-filter-search v0.0.8
Angular ng-filter-search
This library was generated with Angular CLI version 9.0.7.
Description
A simple search filter for table, ul, li or div. we can use this filter for many place as possible.
Example:
syntax
filterArray = FilterSearchService.filterSearch(Searchvalue, ClonedArray, MappingArray);
Abbrevation
filterArray ==> Array to be filtered.
Searchvalue ==> String from input or textbox.
ClonedArray ==> Copy of filterArray for assigning.
MappingArray ==> Array which contain filterArray key to filter
Step1: Import FilterSearchModule to module.ts
import {FilterSearchModule} from 'ng-filter-search';
@NgModule({
imports: [
FilterSearchModule
]
})
step2: Import FilterSearchService to component.ts
import { Component } from '@angular/core';
import {FilterSearchService} from 'ng-filter-search';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public productList: any;
// productList must be a type any.
public cloner = [];
// searchMap is defined to which key to filter
public searchMap = ['name', 'price', 'sellerName', 'status'];
constructor(private fs: FilterSearchService){
// dummy productList you can load from your api
this.productList = [{
id: 1,
identity: 11012,
name: 'Blue Headset',
price: '$123',
sellerName: 'Alibaba',
count: 12,
status: 'Sold Out'
},
{
id: 2,
identity: 31012,
name: 'Red Shoe',
price: '$143',
sellerName: 'Amazon',
count: 2,
status: 'Available'
},
{
id: 3,
identity: 6423,
name: 'Red Shoe',
price: '$123',
sellerName: 'FlipKart',
count: 5,
status: 'Available'
},
{
id: 4,
identity: 64123,
name: 'Mi Phone',
price: '$1123',
sellerName: 'FlipKart',
count: 11,
status: 'Sold out'
},
{
id: 5,
identity: 86423,
name: 'Redmi pro',
price: '$223',
sellerName: 'Alibaba',
count: 9,
status: 'Available'
}];
// this.cloner is important to copy your productList
this.cloner = [...this.productList];
}
onSearchChange(sval: string): void {
// Use filterSearch() function to filter the data
this.productList = this.fs.filterSearch(sval, this.cloner, this.searchMap);
}
}
HTML
Table Filter search
<input placeholder="SEARCH FILTER" (input)="onSearchChange($event.target.value)" />
<table>
<thead>
<tr>
<th>#</th>
<th>Product Identity</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Seller Name</th>
<th>Total Count</th>
<th>Status</th>
</tr>
</thead>
<tbody>
// productList is an array of an object from which we need to filter
<tr *ngFor="let product of productList; let i = index">
<td>{{i+1}}</td>
<td>{{product.identity}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.sellerName}}</td>
<td>{{product.count}}</td>
<td>{{product.status}}</td>
</tr>
</tbody>
</table>
For list
<input placeholder="SEARCH FILTER" style="float:left" (input)="onSearchChange($event.target.value)" />
<ul>
<li *ngFor="let product of productList">{{product.name}}</li>
</ul>
Issue
Don't forget to clone this.cloner = [...this.productList];
. Sometime ...array is may not for dynamic rendering. In that case use like below example
this.cloner = []; // initialize as an array
// copy the product list by this way
this.productList.forEach(elem =>{
this.cloner.push(elem)
})
// passing index from an array like this.cloner[index]
onSearchChange(sval: string, index): void {
this.productList = this.fs.filterSearch(sval, this.cloner[index], this.searchMap);
}