title: Multiple filters on Angular 2
body: <p>I am trying to filter a table using multiple filters.At any point in time I can have either have one or all filters keyed in and the list needs to return accordingly  - I have been successful when all the filters are keyed in - but when I choose any one of it the filtering fails - Please note my code so far  </p>
  
  <p>the filter.html file -</p>
  
  <pre><code> &lt;tr&gt;
                      &lt;td&gt;&lt;input type="text" [(ngModel)]='field1Filter ' /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" [(ngModel)]='field2Filter ' /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" [(ngModel)]='field3Filter ' /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" [(ngModel)]='field4Filter ' /&gt;&lt;/td&gt;
                  &lt;/tr&gt;   
  
  &lt;tr *ngFor='let acct of Accts  | acctFilter :field1Filter :field2Filter :field3Filter :field4Filter'&gt;                                                                                                                    
                      &lt;td&gt;{{acct.field1}}&lt;/td&gt;
                      &lt;td&gt;{{acct.field2}}&lt;/td&gt;
                      &lt;td&gt;{{acct.field3}}&lt;/td&gt;
                      &lt;td&gt;{{acct.field4}}&lt;/td&gt;
                      &lt;td&gt;{{acct.field5}}&lt;/td&gt;
                      &lt;td&gt;{{acct.field6}}&lt;/td&gt;
                      &lt;td&gt;{{acct.field7| date}}&lt;/td&gt;
                      &lt;td&gt;{{acct.field8| date}}&lt;/td&gt;   
  </code></pre>
  
  <p>In my filter.pipe.ts</p>
  
  <pre><code>import { PipeTransform, Pipe } from '@angular/core';
  import { IAcct } from './Acct';
  
  @Pipe({
  
      name: 'acctFilter'
  
  })
  export class AcctFilterPipe implements PipeTransform {
  
      transform(value: IAcct[], field1Filter : any, field2Filter : any, field3Filter : any, field4Filter : any): IAcct[] {
          field1Filter = field1Filter ? field1Filter .toLocaleLowerCase() : null;
          field2Filter = field2Filter ? field2Filter .toLocaleLowerCase() : null;
          field3Filter = field3Filter ? field3Filter .toLocaleLowerCase() : null;
          field4Filter = field4Filter ? field4Filter .toLocaleLowerCase() : null;
  
          return field1Filter &amp;&amp; field2Filter &amp;&amp; field3Filter &amp;&amp; field4Filter  ? value.filter((acct: IAcct) =&gt;
              (acct.field1.toLocaleLowerCase().indexOf(field1Filter) !== -1)
          &amp;&amp; (acct.field2.toLocaleLowerCase().indexOf(field2Filter ) !== -1) &amp;&amp; (acct.field3.toLocaleLowerCase().indexOf(field3Filter ) !== -1) &amp;&amp;  (acct.field4.toLocaleLowerCase().indexOf(field4Filter  ) !== -1)) : value;             
      }                           
  }
  </code></pre>
  
  <p>If i try to use the || on any one of the above clause then it will choose only one of it obvisouly , but I would like the ability filter on any or all of the above filters. </p>
  
  <p>Please let me know your inputs. </p>
  
  <p>Thanks much!
  S</p>