Angular 4 Filter Search Custom Pipe for selected columns

Question

I have created a custom pipe for filtering table data.Now I wanted to add a dropdown that contain the table column, on selecting particular column it will able to search by that column. Any help on this part is appreciated.

code as below :

home.component.html

<select id="Select1" [(ngModel)]="selected">
      <option>EmpID</option>
      <option>EmpName</option>
      <option>Age</option>
      <option>Address1</option>
      <option>Address2</option>
    </select>

<input type="text"  placeholder="Search" [(ngModel)]="query">


<table *ngIf="employee">
    <tr>
        <th>EmpID</th>
            <th>EmpName</th>
                <th>EmpAge</th>
                <th>Address1</th>
                <th>Address2</th>
                <th>Change Detail</th>
                <th>Add Detail</th>

    </tr>

    <tr *ngFor="let employe of employee | search:query |   paginate: { itemsPerPage: 10, currentPage: p }" >
                <td>{{employe.EmpID}}</td>
                <td>{{employe.EmpName}}</td>
                <td>{{employe.Age}}</td>
                <td>{{employe.Address1}}</td>
                <td>{{employe.Address2}}</td>
                <td><button class="btn btn-primary" (click)="open(employe);">Edit</button></td>
                <td><button class="btn btn-primary" (click)="add();">Add</button></td>


    </tr>


</table>

Search.pipe.ts

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

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    if(!value)return null;
    if(!args)return value;

    args = args.toLowerCase();

    return value.filter(function(item){


       return JSON.stringify(item).toLowerCase().includes(args);

    });

}

home.component.ts

employee: any [] = [{
    "EmpID": "1",
    "EmpName": "mukesh12",
    "Age": "182",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},
{
    "EmpID": "2",
    "EmpName": "Rakesh",
    "Age": "1821",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},
{
    "EmpID": "3",
    "EmpName": "abhishek",
    "Age": "184",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "4",
    "EmpName": "rawt",
    "Age": "186",
    "Address1": "ktreptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "5",
    "EmpName": "boy",
    "Age": "11",
    "Address1": "Vtgdreptopelia",
    "Address2": "Ttrnneptopelia hghg"
},

{
    "EmpID": "6",
    "EmpName": "himanshu",
    "Age": "28",
    "Address1": "MStreptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "7",
    "EmpName": "katat",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "8",
    "EmpName": "gd",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "9",
    "EmpName": "tyss",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},


{
    "EmpID": "10",
    "EmpName": "mukesh",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "11",
    "EmpName": "mukesh",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},


{
    "EmpID": "12",
    "EmpName": "lopa",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "13",
    "EmpName": "todo",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "14",
    "EmpName": "mukesh",
    "Age": "16",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "15",
    "EmpName": "mukesh",
    "Age": "38",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "16",
    "EmpName": "mukesh",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "17",
    "EmpName": "see",
    "Age": "08",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "18",
    "EmpName": "hmmm",
    "Age": "18",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "19",
    "EmpName": "mukesh",
    "Age": "28",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
},

{
    "EmpID": "20",
    "EmpName": "tuta",
    "Age": "68",
    "Address1": "Streptopelia",
    "Address2": "Streptopelia hghg"
}];

If EmpID is selected then it will search according to Empid in search field, if EmpName is selected then it will search according to EmpName and so on........

If EmpID is selected then it will search according to Empid in search field, if EmpName is selected then it will search according to EmpName and so on........ — mukesh rawat, Feb 11 '19 at 09:56
I wanted to add a dropdown that contain the table column, on selecting particular column it will able to search by that column — mukesh rawat, Feb 11 '19 at 10:08
pass multiple argument into your pipe - `searchString`, `columnName` https://stackoverflow.com/questions/36816788/how-do-i-call-an-angular-2-pipe-with-multiple-arguments — j4rey, Feb 11 '19 at 10:29
can u do changes in my code actually im new to this. In search pipe and in templet — mukesh rawat, Feb 11 '19 at 10:42

score 0 · Accepted Answer · answered Feb 11 '19 at 11:10

0

Add another parameter your pipe

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'search' })
export class SearchPipe implements PipeTransform {
    transform(value: any, q?: any,colName: any="EmpName"): any {
        if(!value) return null;
        if(!q) return value;
        q = q.toLowerCase();
        return value.filter((item)=> {
            return item[colName].toLowerCase().includes(q);
        });
    }
}

home.component.html

<tr *ngFor="let employe of employee | search:query:selected |   paginate: { itemsPerPage: 10, currentPage: p }" >

answered Feb 11 '19 at 11:10

j4rey

2,582
20
34

If i'm not selecting any column and create a option select in my templet like . Then it should search normally but when i select column then it search like that ???? – mukesh rawat Feb 11 '19 at 11:52
any help on this will be great – mukesh rawat Feb 11 '19 at 11:53
Put an `if` checking in the `transform` function to check for 'select'. – j4rey Feb 11 '19 at 12:03
if(!colName) { return JSON.stringify(item).toLowerCase().includes(q); } else { return item[colName].toLowerCase().includes(q); } – mukesh rawat Feb 11 '19 at 12:10
if you add `` in your select dropdown, then 'select' would be passed as the `colName` to the pipe. So add the `if(colName==='select'){//whatever you want to do} else { return item[colName].toLowerCase().includes(q); }` – j4rey Feb 11 '19 at 12:19
if(colName==='Select') { return JSON.stringify(item).toLowerCase().includes(q); } else { return item[colName].toLowerCase().includes(q); } – mukesh rawat Feb 11 '19 at 12:29
if 'select' is selected from dropdown then what do you want to filter it with? – j4rey Feb 11 '19 at 12:52
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'search' }) export class SearchPipe implements PipeTransform { transform(value: any, q?: any,colName: any="EmpName"): any { if(!value) return null; if(!q) return value; q = q.toLowerCase(); return value.filter((item)=> { if(colName.toLowerCase()==='select') return JSON.stringify(item).toLowerCase().includes(q); else return item[colName].toLowerCase().includes(q); }); } } – j4rey Feb 11 '19 at 13:10

Angular 4 Filter Search Custom Pipe for selected columns

1 Answers1