title: Multiple filter for one datatable in Angular 2
body: <p>I am working on Angular 2. In one of my scenario I have to add multiple filters for one DataTable. I have created custom DataTable for my project.
  <br>
  Filters like: 
  <a href="https://i.stack.imgur.com/eebB4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eebB4.png" alt="enter image description here"></a></p>
  
  <p>After searching on google and review answer on stackoverflow I found this Plunker <a href="https://plnkr.co/edit/e0PCIsqXumbXe6mAUWBI?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/e0PCIsqXumbXe6mAUWBI?p=preview</a></p>
  
  <p>I have code as in plunker but not working for me.</p>
  
  <p>My Code:</p>
  
  <p>Pipe:</p>
  
  <pre><code>transform(items: Array&lt;any&gt;, filter: {[key: string]: any }): Array&lt;any&gt; {
      return items.filter(item =&gt; {
              let notMatchingField = Object.keys(filter)
                                           .find(key =&gt; item[key] !== filter[key]);
  
              return !notMatchingField; // true if matches all fields
          });
  }
  </code></pre>
  
  <p>Component Html:</p>
  
  <pre><code>&lt;tr *ngFor="let item of dataresult | jbgridfilter: filterItems | orderBy : [orderbyKey, 'ID']  | paginate: { itemsPerPage: numOfPages, currentPage: p }"
                        (click)="showRowDetails(item)"&gt;
                        &lt;td *ngFor="let key of keysArray;"&gt;&lt;span&gt;{{item[key]}}&lt;/span&gt;&lt;/td&gt;
                        &lt;tr&gt;
  </code></pre>
  
  <p>Component Class:</p>
  
  <pre><code>valueForFilter(key, event) {
        let item = {key: event};
        this.filterItems.push(item);
      }
  </code></pre>
  
  <p>Note that: the table is dynamic, means the fields can be any not fixed.</p>