Search filter in custom list component

Question

I am creating a custom list component with a search in my angular project. This component will take itemList as input and list the items based on the same. I would like to plug in a search bar to this component so that the user can search the items from the list.

I have created a pipe as mentioned here by Moshe Quantz for search. this is not working with the component i have created. please find the stackblitz code snippet here.

Answer 1

The search pipe takes 3 params.

1. Value: it is list of items on which you want to perform search.
2. keys: it is string with comma separated values. This string(s) is used to specify the field(s) of value on which search must be performed.
3. query: The actual search term which user types in textbox

.

  public transform(value, keys: string, term: string) 

so the the problem is your object fields differ from the on used in other example. Simply update those and it will work fine.

<input placeholder="search text goes here" [(ngModel)]="query">
<div *ngFor="let item of listItem | search:'title,date,status':query">
    <app-list-card [item]="item"></app-list-card>    
</div>

Working example on stackbliz.com

Please do note that using Pipe in such a way is very poor practice and may cause performance issue as the number of items in list increases.