Filter on multiple columns in a table using one pipe in Angular

Question

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

component.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.companyPersonName}}</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()) );
}

worth reading: angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe :) — AVJT82
– 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
– Eliseo, Commented Dec 4, 2017 at 11:33

Rutvij07 · Accepted Answer · 2017-12-06 07:39:57Z

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

value: Which involves all the data inside the table, all columns

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 companyPersonName

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 companyPersonName = it.companyPersonName.toLowerCase().includes(searchString.toLowerCase())
           console.log( builderId + groupName + companyPersonName);
           return (builderId + groupName + companyPersonName );      
       }) 
    }
}

What does the transform function do?

builderId, groupName and companyPersonName are the three fields I searched

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

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.companyPersonName}}</td> 
  </tr>

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

Prithivi Raj · Accepted Answer · 2017-12-04 11:47:04Z

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 component. increase the arguments in pipe component 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);
  }
}

Collectives™ on Stack Overflow

Filter on multiple columns in a table using one pipe in Angular

2 Answers 2

Passed 2 arguments in the transform function

What does the transform function do?

1 Comment

Comments

Your Answer

Linked

Hot Network Questions