Implementing search using custom pipe in angular

Question

I tried implementing my own pipe in angular 6 using search box for filtering the list of my campaigns. Oddly, I'm unable to filter the the list of campaigns. I'm posting my code down below.

This is how my filter looks like:

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

@Pipe({
  name: 'nameFilter'
})

export class NameFilterPipe implements PipeTransform {
  transform(values: any[], key: string, value: string): any[] {
    debugger;

    if (!values) {
      return [];
    }
    if (!value) {
      return values;
    }
    return values.filter(val => val.CampaignName === value);
  }
}

<input [(ngModel)]="searchText" placeholder="search here">

<tr *ngFor="let campaign of campaigns?.result | nameFilter : searchText">

  <td style="max-width:280px">
  
    <p>{{campaign.CampaignName}}</p>
    
    <small><span class="cursor" (click)="filterByOwnr(campaign.DepartmentName)" > {{ campaign.DepartmentName }} &nbsp; &nbsp; </span></small>
    
  </td>

I debugged my pipe, and this is how it looks like:

I am able to get the value to my pipe but unable to apply filter in my html page.

P.S : After trying @Arcteezy , i'm getting the following error.

Console log for console.log(field) :

Are you looking for exact matches or if it only contains than show that as well? — Haseeb Ahmed
– Haseeb Ahmed, Commented Dec 21, 2018 at 8:15

MonkeyScript · Accepted Answer · 2018-12-21 08:57:20Z

3

Try this,

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

    @Pipe({
        name: 'filter'
    })

    @Injectable()
    export class FilterPipe implements PipeTransform {
        transform(items: any[], field: string, value: string): any[] {

            console.log(value);
            if (!items) {
                return [];
            }
            if (!field || !value) {
                return items;
            }

            return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
        }
    }

In your HTML,

    *ngFor = "let... | filter : '<search_field>' : searchText"

edited Dec 21, 2018 at 8:57

answered Dec 21, 2018 at 7:42

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Prudhvi Bharadwaj Over a year ago

Sir, I'm getting the following error. I've attached a log to my question.

Prudhvi Bharadwaj Over a year ago

Sir, I've imported the @Injectable and tried to log the value on the console and i have attached the copy of my log above. Please look.

MonkeyScript Over a year ago

So value is not undefined. Do a console.log(items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()))). And this one too console.log(items.filter(singleItem => singleItem[field].toLowerCase() == value.toLowerCase()))

MonkeyScript Over a year ago

I believe you are trying to filter based on CampaignName. console.log(field) to make sure you are getting that correct.

Prudhvi Bharadwaj Over a year ago

I did a console log of field. Please check the link above.

|

Yaswanth · Accepted Answer · 2018-12-21 08:34:05Z

Pipe file

filteredItems: Array<any>;
// Items & searchText is the input of the pipe;
// @param: Items contains current object in the ngFor loop.
// @param: searchText is the text that is need to be searched string.


transform(items: any[], searchText: string): any[] {

    if (!items) {
        return [];
    }
    if (!searchText) {
        return items;
    }
    searchText = searchText.toLowerCase();
    this.filteredItems =  items.filter( function (records) {
        let searchMatched;
        for ( const keys in records ) {
            if ( typeof (records[keys]) === 'string') {
                searchMatched = records[keys].toLowerCase().includes(searchText);
                if (searchMatched) {
                    return searchMatched;
                }
            }
        }
    });

    if (this.filteredItems.length < Constants.ONE_COUNT) {
        return -1;
    } else {
        return this.filteredItems;
    }
}

Returning the -1 in the last second line is to handle the zero results found.

HTML File

*ngFor="data| searchFilter: inputText;

The above code will do the case-insensitive search if you want to implement case sensitive search please remove the conversion of search text to lowercase

Farhat Zaman · Accepted Answer · 2018-12-21 10:17:15Z

0

in your pipe .ts

 @Pipe({
  name: 'nameFilter'
})

export class NameFilterPipe implements PipeTransform {
  transform(values: any, key?: string): any[] {
    debugger;
    if (!key) return values;
    key = (key.trim()).toLowerCase();
    return values.filter(val => (val.CampaignName).toLowerCase() === key);
  }
}

and in your .html

<tr *ngFor="let campaign of campaigns | nameFilter : searchText">

here is a link of working example of stackblitz

answered Dec 21, 2018 at 10:17

Farhat Zaman

1,37910 silver badges22 bronze badges

Collectives™ on Stack Overflow

Implementing search using custom pipe in angular

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related