ng-filter-search

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);
}