How to make array search filter in angular2?

Question

I create a text box and an array. I want to filter array items according to the text box value.

 <div class="searchboxt"> <input type="text" placeholder="Search Tickets" 
 class="searchboxttext" [(ngModel)]="searchfav"/> </div>
 <li class="selectlistticket" *ngFor="let fav of (favlist.slice().reverse() 
 | SearchfilterPipe: searchfav)" (mouseover)="showfavstar(fav)" (mouseleave)
 ="hidefavstar(fav)">

How do I filter an array in angular2?

stackoverflow.com/questions/34417250/… This can helps you. — Maks K
– Maks K, Commented Jun 7, 2017 at 12:21
stackoverflow.com/questions/37003551/… please check this will be helpful to you — Jackson
– Jackson, Commented Jun 7, 2017 at 12:25
I need a code like if I type anything in the text box and an array list only has to show relevant rows.In angular it's very easy to implement — Arvind
– Arvind, Commented Jun 7, 2017 at 12:34
AngularX does not come with a filter pipe as angularjs does because they perform poorly and prevent aggressive minification. But you can easily write your own Pipes if you want to. I'm not going to write the code for you but if you want a zero-effort solution, go for an NPM package like e.g. ng2-filter-pipe. — Nico Van Belle
– Nico Van Belle, Commented Jun 7, 2017 at 13:01
I made a solution for this one nico.please refer this custom pipe for better results — Arvind
– Arvind, Commented Jun 7, 2017 at 13:13

Arvind · Accepted Answer · 2017-06-07 13:12:30Z

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

@Pipe({
  name: 'searchfilter',
  pure: false
})
export class SearchfilterPipe implements PipeTransform {

  transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
      for(let property in item){
        if (item[property] === null){
          continue;
        }
        if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
          return true;
        }
      }
      return false;
    });
  }
}

This works 100% fine like I expected. Save this as pipe and import this in both appmodule and your component.

   
     <div class="searchboxt"> <input type="text" placeholder="Search Tickets" class="searchboxttext" [(ngModel)]="searchfav"/> </div>

   <li class="selectlistticket" *ngFor="let fav of favlist.slice().reverse() | searchfilter :searchfav" (mouseover)="showfavstar(fav)" (mouseleave)="hidefavstar(fav)">

Collectives™ on Stack Overflow

How to make array search filter in angular2?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related