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

ng-filter-search

npm install ng-filter-search –save

Step1: Import FilterSearchModule to module.ts

https://www.npmjs.com/package/ng-filter-search

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>

You can apply this filter for any search filter.