title: How to do a global search in angular 2?
body: <p>I'm a new developper in angular2 and I want to do a global search in an array of json objects. For example, this array :</p>
  
  <pre class="lang-ts prettyprint-override"><code>invoiceList = 
    [
      {
        invoiceNumber: 1234, 
        invoiceSupplier: "test", 
        invoiceStatus: "Import error", 
        invoiceCategory: "invoice with GR", 
        date: "22/01/2017", 
        amount : 134527
      },
      ...
    ];
  </code></pre>
  
  <p>And I want to do my search like that : 
  <a href="https://i.stack.imgur.com/YxoBo.png"><img src="https://i.stack.imgur.com/YxoBo.png" alt="enter image description here"></a></p>
  
  <p>The problem and the difficulty here is that : </p>
  
  <ul>
  <li>I want to search depending only on some values (ex : status, supplier name, number...) and display OTHER fields (like date, net amount etc..).</li>
  <li>I want to order by the final results depending on some values (ex: number, supplier, date and amount). And I don't how to do that in angular2.</li>
  <li>Finally, I want to do an "equivalent" of ng-show in angular2? I mean that I want to display the table only if we press search button, and if we click on cancel, it will remove it.</li>
  </ul>
  
  <p>I know that it was simple to do that in angular 1, we can use filters, 'orderBy' and things like that but apparently in angular2, we can't do that and I got very very confused. Can you help me to solve that please???</p>
  
  <p>here is my component code :</p>
  
  <pre class="lang-ts prettyprint-override"><code>  import { Component, OnInit } from '@angular/core';
  
    @Component({
      selector: 'app-search',
      templateUrl: './search.component.html'
    })
    export class SearchComponent implements OnInit {
  
    invoiceList = [{invoiceNumber:  1234, invoiceSupplier : "test", invoiceStatus : "Import error", invoiceCategory: "invoice with GR", date : "22/01/2017", amount : 134527}, 
    {invoiceNumber:  15672, invoiceSupplier : "test11", invoiceStatus : "Import error", invoiceCategory: "invoice without PO", date : "02/01/2017", amount : 134.3},
    {invoiceNumber:  99863, invoiceSupplier : "test22", invoiceStatus : "Other Document", invoiceCategory: "invoice with GR", date : "10/12/2016", amount : 189},
    {invoiceNumber:  24561, invoiceSupplier : "test50", invoiceStatus : "Other Document", invoiceCategory: "invoice without PO", date : "15/01/2017", amount : -134527},
    ];
  
  
      constructor() { }
  
      ngOnInit() {
      }
  
    }
  </code></pre>
  
  <p>and my html code :</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;form&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;Invoice Number :&lt;/td&gt;
          &lt;td&gt;
            &lt;input name="invoiceNumber"&gt;
          &lt;/td&gt;
  
          &lt;td&gt;Invoice Supplier Name :&lt;/td&gt;
          &lt;td&gt;
            &lt;input name="invoiceSupplier"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;Invoice Status :&lt;/td&gt;
          &lt;td&gt;
            &lt;select name="invoiceStatus"&gt;
  
              &lt;option&gt;&lt;/option&gt;
              &lt;option&gt; Import error &lt;/option&gt;
              &lt;option&gt; Invoice control required &lt;/option&gt;
              &lt;option&gt;Rejected from SAP &lt;/option&gt;
              &lt;option&gt;Other Document &lt;/option&gt;
              &lt;option&gt; Invoice created manually in SAP &lt;/option&gt;
              &lt;option&gt;To be integrated in SAP &lt;/option&gt;
              &lt;option&gt; Integrated in SAP &lt;/option&gt;
              &lt;option&gt; Booked in SAP &lt;/option&gt;
              &lt;option&gt;Paid in SAP&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
  
          &lt;td&gt;Invoice Category :&lt;/td&gt;
          &lt;td&gt;
  
            &lt;select name="invoiceCategory"&gt;
              &lt;option&gt;&lt;/option&gt;
              &lt;option&gt;Invoice with GR&lt;/option&gt;
              &lt;option&gt;Invoice without GR&lt;/option&gt;
              &lt;option&gt;Invoice without PO&lt;/option&gt;
  
            &lt;/select&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;Order :&lt;/td&gt;
          &lt;td&gt;
            &lt;select name="order"&gt;
  
              &lt;option&gt; Number &lt;/option&gt;
              &lt;option&gt; Supplier &lt;/option&gt;
              &lt;option&gt; Date &lt;/option&gt;
              &lt;option&gt; Net Amount &lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;
            &lt;button type="submit"&gt;Search&lt;/button&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;div class="detail"&gt;
              &lt;button type="reset"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/table&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>I know that I didn't do anything so far, but I'm really new at angular2, and I really got confused. Can you help me please at least with the component part??? </p>
  
  <p>Thank you in advance !</p>