how to do a search in angular2?

Question

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 :

invoiceList = 
  [
    {
      invoiceNumber: 1234, 
      invoiceSupplier: "test", 
      invoiceStatus: "Import error", 
      invoiceCategory: "invoice with GR", 
      date: "22/01/2017", 
      amount : 134527
    },
    ...
  ];

And I want to do my search like that :

The problem and the difficulty here is that :

I want to search depending only on some values (ex : status, supplier name, number...) and display OTHER fields (like date, net amount etc..). In other words, I want to do an AND search here depending on 4 values (number, supplier, category and status)
I want to order the final results depending on some values (ex: number, supplier, date and amount). And I don't how to do that in angular2.
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.

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???

here is my component 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() {
    }

  }

and my html code :

  <form>
    <table>
      <tr>
        <td>Invoice Number :</td>
        <td>
          <input name="invoiceNumber">
        </td>

        <td>Invoice Supplier Name :</td>
        <td>
          <input name="invoiceSupplier">
        </td>
      </tr>

      <tr>
        <td>Invoice Status :</td>
        <td>
          <select name="invoiceStatus">

            <option></option>
            <option> Import error </option>
            <option> Invoice control required </option>
            <option>Rejected from SAP </option>
            <option>Other Document </option>
            <option> Invoice created manually in SAP </option>
            <option>To be integrated in SAP </option>
            <option> Integrated in SAP </option>
            <option> Booked in SAP </option>
            <option>Paid in SAP</option>
          </select>
        </td>

        <td>Invoice Category :</td>
        <td>

          <select name="invoiceCategory">
            <option></option>
            <option>Invoice with GR</option>
            <option>Invoice without GR</option>
            <option>Invoice without PO</option>

          </select>
        </td>
      </tr>

      <tr>
        <td>Order :</td>
        <td>
          <select name="order">

            <option> Number </option>
            <option> Supplier </option>
            <option> Date </option>
            <option> Net Amount </option>
          </select>
        </td>
      </tr>

      <tr>
        <td>
          <button type="submit">Search</button>
        </td>
        <td>
          <div class="detail">
            <button type="reset">Cancel</button>
          </div>
        </td>
      </tr>

    </table>
  </form>

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???

Thank you in advance !

you should no include data in the component, create a service that connects to the database — Roman C, Jan 23 '17 at 23:44
it's just an example. I want store any "real" data in my component of course. What I asked for is about the logics to use to perform an AND search (i want to searching depending on 4 values for example...). I don't know if I was clear for you... — salamanka44, Jan 23 '17 at 23:48
the searching logic depends on implementation, show what did you try so far to get help if you want to fix an error. — Roman C, Jan 23 '17 at 23:52
I didn't start anything so far. I was searching what is the equivalent of "filters" and "orderBy" in angular2 but it was ambiguous for me and I got confused. I didn't find anything clear about that, until now ! (either way, I won't be even asking for a help here...) — salamanka44, Jan 24 '17 at 00:09
Possible duplicate of [How to do a global search in angular 2?](http://stackoverflow.com/questions/41809812/how-to-do-a-global-search-in-angular-2) — Petter Friberg, Apr 20 '17 at 19:01

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

Angular 2 removed standard filter and order by to improve performance.

I think this other question may help you How to apply filters to *ngFor

edited May 23 '17 at 11:54

Community

1
1

answered Jan 24 '17 at 01:40

Jonathan Niu

311
1
8

Honestly, I didn't understand well that answer. Can you just show me a little implementation PLEASE (just the beginning and I will do the rest !) ? because I didn't really understand it... Thanks – salamanka44 Jan 24 '17 at 06:02

how to do a search in angular2?

1 Answers1