Hi everyone. I want to make a custom filter for my table which intakes more than one argument to search multiple columns .. in my case right now only one argument can be passed . thanks in advance

ponent.html

<tr *ngFor = "let builder of builderDetailsArray[0] | filter :'groupName': searchString; let i = index" >
    <td style="text-align: center;"><mat-checkbox></mat-checkbox></td>
    <td>{{builder.builderId}}</td>
    <td>{{builder.viewDateAdded}}</td>
    <td>{{builder.viewLastEdit}}</td>
    <td>{{builder.groupName}}</td>
    <td>{{builderpanyPersonName}}</td>
    <td style="text-align: center;"><button mat-button color="primary">UPDATE</button></td>
</tr>

pipe.ts

@Pipe({
    name: "filter",
    pure:false
})

export class FilterPipe implements PipeTransform {
    transform(items: any[], field: string, value: string): any[] {
    if (!items) {
        return [];
    }
    if (!field || !value) {
        return items;
    }
    return items.filter(singleItem => 
        singleItem[field].toLowerCase().includes(value.toLowerCase()) );
}

Hi everyone. I want to make a custom filter for my table which intakes more than one argument to search multiple columns .. in my case right now only one argument can be passed . thanks in advance

ponent.html

<tr *ngFor = "let builder of builderDetailsArray[0] | filter :'groupName': searchString; let i = index" >
    <td style="text-align: center;"><mat-checkbox></mat-checkbox></td>
    <td>{{builder.builderId}}</td>
    <td>{{builder.viewDateAdded}}</td>
    <td>{{builder.viewLastEdit}}</td>
    <td>{{builder.groupName}}</td>
    <td>{{builder.panyPersonName}}</td>
    <td style="text-align: center;"><button mat-button color="primary">UPDATE</button></td>
</tr>

pipe.ts

@Pipe({
    name: "filter",
    pure:false
})

export class FilterPipe implements PipeTransform {
    transform(items: any[], field: string, value: string): any[] {
    if (!items) {
        return [];
    }
    if (!field || !value) {
        return items;
    }
    return items.filter(singleItem => 
        singleItem[field].toLowerCase().includes(value.toLowerCase()) );
}

• javascript
• angular
• typescript

• worth reading: angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe :) – AVJT82 Commented Dec 4, 2017 at 11:23
• @Shoyed, you can pass multiple parameters this way: pipeName: parameter1: parameter2 :parameter3, but take acount AJT_82 say , you must switch the "field" – Eliseo Commented Dec 4, 2017 at 11:33

2 Answers 2

Created multiple arguments pipe in angular 4

The code lets you search through multiple columns in your table.

Passed 2 arguments in the transform function

1. value: Which involves all the data inside the table, all columns
2. searchString: What you want to search inside the columns (inside the table).

Hence, you can define which columns to be searched inside the transform function.

In this case, the columns to be searched are builderId, groupName and panyPersonName

Pipe file

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: "arrayFilter"
})

export class BuilderFilterPipe implements PipeTransform {

    transform(value:any[],searchString:string ){

       if(!searchString){
         console.log('no search')
         return value  
       }

       return value.filter(it=>{   
           const builderId = it.builderId.toString().includes(searchString) 
           const groupName = it.groupName.toLowerCase().includes(searchString.toLowerCase())
           const panyPersonName = it.panyPersonName.toLowerCase().includes(searchString.toLowerCase())
           console.log( builderId + groupName + panyPersonName);
           return (builderId + groupName + panyPersonName );      
       }) 
    }
}

What does the transform function do?

1. builderId, groupName and panyPersonName are the three fields I searched

2. builderId converted to string because our searchString is in string format.

3. toLowerCase() is used to make search accurate irrespective of user search in lowercase or uppercase

Html:

  <tr *ngFor = "let builder of newBuilderDetailsArray | arrayFilter:search" >
      <td>{{builder.builderId}}</td>
      <td>{{builder.groupName}}</td>
      <td>{{builder.panyPersonName}}</td> 
  </tr>

Make sure your filter.ts file added to module.ts file

Below is the sample code where I have passed 10 and 2 as arguments to pipes similarly you can pass multiple arguments and get it through parameters in pipe ponent. increase the arguments in pipe ponent with respect to number of inputs. working demo

Template

<p>Super power boost: {{2 | exponentialStrength:10:2}}</p>

Pipe

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent1: any,exponent2: any): number {
    let exp = parseFloat(exponent2);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}