Angular 2 index not showing after filter pipe

Question

trying to make a filter with pipes but when i use the pipe index no longer shows up in table can't find whats wrong.

<form>
    <label>Search</label>
    <input class="search" placeholder="   Įveskite užsakymo numerį" type="text" [(ngModel)]="orderNumber" [ngModelOptions]="{standalone: true}">
</form>
<table class="table table-hover" *ngIf="orderList.length !== 0">
  <thead>
    <tr>
      <td>Data</td>
      <td>Užsakytos prekės</td>
      <td>Užsakymo nr.</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let count of orderList; let i = index">
      <td>{{ date | date:'yyyy-MM-dd HH:mm' }}</td>
      <td>
        <ul>
          <li *ngFor="let product of count">{{ product.name }} {{ product.price }} Eur</li>
        </ul>
      </td>
      <td>{{ i | searchOrder:orderNumber }}</td>
    </tr>
  </tbody>
</table>

And here is the pipe code

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

@Pipe({
  name: 'searchOrder'
})

export class SearchOrderPipe implements PipeTransform {

  transform(orderList: any, orderNumber: any): any {

    if (orderNumber !== undefined) 
    return orderList.filter(orderNumber);
  }
}

pipe code could be bad too but i might figure it out if only i could make index show up in table. What i want to do is enter a number in input field and get that table row which contains index equal to my entered number, i dont think i can get index value to pipe because its generated inn html i cant even log it in pipe code

Answer 1

Maybe you want somthing like that:

<form>
    <label>Search</label>
    <input class="search" placeholder="   Įveskite užsakymo numerį" type="text" [(ngModel)]="orderNumber" [ngModelOptions]="{standalone: true}">
</form>
<table class="table table-hover" *ngIf="orderList.length !== 0">
  <thead>
    <tr>
      <td>Data</td>
      <td>Užsakytos prekės</td>
      <td>Užsakymo nr.</td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let count of orderList | searchorder:orderNumber">
      <td>{{ date | date:'yyyy-MM-dd HH:mm' }}</td>
      <td>
        <ul>
          <li *ngFor="let product of count">{{ product.name }} {{ product.price }} Eur</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

and the pipe

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

@Pipe({
  name: 'searchOrder'
})

export class SearchOrderPipe implements PipeTransform {

  transform(orderList: any, orderNumber: any): any {

    if (orderNumber) {
      return [orderList.[orderNumber]];
    }
    return orderList;
  }
}

So i filtered the list and the pipe returns eihter the original array if orderNumber undefined, or an array only consiting of that row.