troubleshooting Question

Angular 2 Pipe - Multipe Filters

Avatar of Cynthia Hill
Cynthia HillFlag for United States of America asked on
Web DevelopmentHTML
8 Comments1 Solution121 ViewsLast Modified:
Hello -

I'm working with pipes to filter a data set. I am new to Angular I am baby stepping my way into the full functionality I am trying to implement.

I'm working to add two separate filters...looking at two separate fields. I want to do them separately b/c the data set the filters will be applied to will be large....and response times for the second filter (which will be searching a name field) will be slower than response times for the 1st filter (which will be looking at an ID).

I've implemented the search functionality to look at two fields...which is great. However, I want it to not return anything unless something is entered into one of the search boxes. When i was working with just one filter for the ID field...i was able to do this using
if (!IDSearch) return null

Open in new window

. If  I did not have that caused problems when the user changed IDs. How do I add similar logic to when using the two search boxes?

Below is the code for my pipe component.

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

  name: 'employeeSelection'
export class EmployeeSelectionPipe implements PipeTransform {

//CH Multiple Search Play
public transform(items: any[], IDSearch: string, nameSearch: string) {
    if (items && items.length){
            return items.filter(item =>{

                if (IDSearch && item.ID.toLowerCase().indexOf(IDSearch.toLowerCase()) === -1){
                    return false;
                if (nameSearch && item.EmployeeName.toLowerCase().indexOf(nameSearch.toLowerCase()) === -1){
                    return false;

                return true;
            return null;


export const appPipes = [EmployeeSelectionPipe];

Open in new window

Join our community to see this answer!
Unlock 1 Answer and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros