angular ng-filter-search to any component like table, list, div and etc


npm install ng-filter-search –save

Step1: Import FilterSearchModule to module.ts

import {FilterSearchModule} from 'ng-filter-search';
imports: [

step2: Import FilterSearchService to component.ts

import { Component } from '@angular/core';
import {FilterSearchService} from 'ng-filter-search';
  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);


Table Filter search

<input placeholder="SEARCH FILTER" (input)="onSearchChange($" />
        <th>Product Identity</th>
        <th>Product Name</th>
        <th>Product Price</th>
        <th>Seller Name</th>
        <th>Total Count</th>
    // productList is an array of an object from which we need to filter
      <tr *ngFor="let product of productList; let i = index">

For list

<input placeholder="SEARCH FILTER" style="float:left" (input)="onSearchChange($" />
    <li *ngFor="let product of productList">{{}}</li>

You can apply this filter for any search filter.