How to apply filters to ngFor

Question

Apparently  Angular 2 will use pipes instead of filters as in Angular1 in conjunction with ng-for to filter results  although the implementation still seems to be vague  with no clear documentation   Namely what I m trying to achieve could be viewed from the following perspective   lt div  ng-for   item of itemsList   ng-if  conditon item   gt  lt  div gt    How to implement so using pipes

User · Answer

Another approach I like to use for application specific filters, is to use a custom read-only property on your component which allows you to encapsulate the filtering logic more cleanly than using a custom pipe (IMHO).

For example, if I want to bind to albumList and filter on searchText:

searchText: "";
albumList: Album[] = [];

get filteredAlbumList() {
    if (this.config.searchText && this.config.searchText.length > 1) {
      var lsearchText = this.config.searchText.toLowerCase();
      return this.albumList.filter((a) =>
        a.Title.toLowerCase().includes(lsearchText) ||
        a.Artist.ArtistName.toLowerCase().includes(lsearchText)
      );
    }
    return this.albumList;
}

To bind in the HTML you can then bind to the read-only property:

<a class="list-group-item"
       *ngFor="let album of filteredAlbumList">
</a>

I find for specialized filters that are application specific this works better than a pipe as it keeps the logic related to the filter with the component.

Pipes work better for globally reusable filters.

User · Answer

For this requirement  I implement and publish a generic component  See   https   www npmjs com package w-ng5  For use this components  before  install this package with npm   npm install w-ng5 --save   After  import module in app module      import   PipesModule   from  w-ng5     In the next step  add in declare section of app module   imports      PipesModule            Sample use  Filtering simple string   lt input type  text     ngModel    filtroString  gt   lt ul gt     lt li  ngFor  let s of getStrings     filter filtroString  gt        s      lt  li gt   lt  ul gt    Filtering complex string - field  Value  in level 2   lt input type  text     ngModel    search  gt   lt ul gt     lt li  ngFor  let s of getComplexTypesExtends     filter   field  n1 n2 valor2   value  search    gt        s nome   -   s idade   -   s n1 valor1   -   s n1 n2 valor2      lt  li gt   lt  ul gt    Filtering complex string - middle field -  Value  in level 1   lt input type  text     ngModel    search3  gt   lt ul gt     lt li  ngFor  let s of getComplexTypesExtends     filter   field  n1 valor1   value  search3    gt        s nome   -   s idade   -   s n1 valor1   -   s n1 n2 valor2      lt  li gt   lt  ul gt    Filtering complex array simple - field  Nome  level 0   lt input type  text     ngModel    search2  gt   lt ul gt     lt li  ngFor  let s of getComplexTypesExtends     filter   field  nome   value  search2    gt        s nome   -   s idade   -   s n1 valor1   -   s n1 n2 valor2      lt  li gt   lt  ul gt    Filtering in tree fields - field  Valor  in level 2 or  Valor  in level 1 or  Nome  in level 0   lt input type  text     ngModel    search5  gt   lt ul gt     lt li  ngFor  let s of getComplexTypesExtends     filter   field  n1 n2 valor2   value  search5    field  n1 valor1   value  search5    field  nome   value  search5    gt        s nome   -   s idade   -   s n1 valor1   -   s n1 n2 valor2      lt  li gt   lt  ul gt    Filtering nonexistent field -  Valor  in nonexistent level 3   lt input type  text     ngModel    search4  gt   lt ul gt     lt li  ngFor  let s of getComplexTypesExtends     filter   field  n1 n2 n3 valor3   value  search4    gt        s nome   -   s idade   -   s n1 valor1   -   s n1 n2 valor2      lt  li gt   lt  ul gt    This component work with infinite attribute level

User · Answer

I created the following pipe for getting desired items from a list   import   Pipe  PipeTransform   from   angular core     Pipe     name   filter     export class FilterPipe implements PipeTransform      transform items  any    filter  string   any       if  items     filter          return items               To search values only of  name  variable of your object item        return items filter item   gt  item name toLowerCase   indexOf filter toLowerCase        -1           To search in values of every variable of your object item      return items filter item   gt  JSON stringify item  toLowerCase   indexOf filter toLowerCase        -1            Lowercase conversion is just to match in case insensitive way  You can use it in your view like this -   lt div gt     lt input type  text  placeholder  Search reward    ngModel    searchTerm  gt   lt  div gt   lt div gt     lt ul gt       lt li  ngFor  let reward of rewardList   filter searchTerm  gt         lt div gt           lt img  src   reward imageUrl   gt           lt p gt   reward name   lt  p gt         lt  div gt       lt  li gt     lt  ul gt   lt  div gt

User · Answer

I know its an old question  however  I thought it might be helpful to offer another solution   equivalent of AngularJS of this   lt div  ng-for   item of itemsList   ng-if  conditon item   gt  lt  div gt    in Angular 2  you cant use  ngFor and  ngIf on a same element  so it will be following    lt div  ngFor  let item of itemsList  gt        lt div  ngIf  conditon item   gt        lt  div gt   lt  div gt    and if you can not use  as internal container use ng-container instead  ng-container is useful when you want to conditionally append a group of elements  ie using  ngIf  foo   in your application but don t want to wrap them with another element

User · Answer

pipes in Angular2 are similar to pipes on the command line   The output of each preceding value is fed into the filter after the pipe which makes it easy to chain filters as well like this    lt template  ngFor   item of itemsList  gt       lt div  ngIf  conditon item   gt  item   filter1   filter2  lt  div gt   lt  template gt

User · Answer

The first step you create Filter using  Pipe in your component ts file   your component ts  import   Component  Pipe  PipeTransform  Injectable   from   angular core   import   Person  from  yourPath     Pipe     name   searchfilter      Injectable   export class SearchFilterPipe implements PipeTransform     transform items  Person    value  string   any         if   items     value          return items            console log  your search token     value       return items filter e   gt  e firstName toLowerCase   includes value toLocaleLowerCase             Component              persons       ngOnInit                inicial persons arrays            And data structure of Person object   person ts  export class Person      constructor          public firstName  string          public lastName  string               In your view in html file   your component html       lt input class  form-control  placeholder  Search  id  search  type  text    ngModel    searchText   gt       lt table class  table table-striped table-hover  gt         lt colgroup gt           lt col span  1  style  width  50    gt           lt col span  1  style  width  50    gt         lt  colgroup gt         lt thead gt           lt tr gt             lt th gt First name lt  th gt             lt th gt Last name lt  th gt           lt  tr gt         lt  thead gt         lt tbody gt           lt tr  ngFor  let person of persons   searchfilter searchText  gt             lt td gt   person firstName   lt  td gt             lt td gt   person lastName   lt  td gt           lt  tr gt         lt  tbody gt       lt  table gt

User · Answer

There is a dynamic filter pipe that I use Source data   items     foo   hello world     foo   lorem ipsum     foo   foo bar      In the template you can dinamically set the filter in any object attr   lt li  ngFor  quot let item of items   filter  foo  bar   quot  gt   The pipe    import   Pipe  PipeTransform   from   angular core       Pipe       name   filter          export class FilterPipe implements PipeTransform       transform items  any    filter  Record lt string  any gt    any         if   items     filter            return items                 const key   Object keys filter  0         const value   filter key          return items filter  e    gt  e key  indexOf value      -1              Don t forget to register the pipe in your app module ts declarations

User · Answer

I m not sure when it came in but they already made slice pipe that will do that  It s well documented too   https   angular io docs ts latest api common index SlicePipe-pipe html   lt p  ngFor  let feature of content  keyFeatures   slice 1 5  gt        feature description     lt  p gt

User · Answer

Pipe would be best approach  but below one would also work    lt div  ng-for   item of itemsList  gt     lt ng-container  ng-if  conditon item   gt         my code    lt  ng-container gt   lt  div gt

User · Answer

A simple solution that works with Angular 6  for filtering a ngFor  it s the following    x000D   x000D   lt span  ngFor  item of itemsList    gt  x000D     lt div  ngIf  yourCondition item   gt  x000D       x000D      your code x000D       x000D     lt  div gt  x000D   lt  span x000D   x000D   x000D    Spans are useful because does not inherently represent anything

User · Answer

Ideally you should create angualr 2 pipe for that  But you can do this trick       lt ng-container  ngFor  item in itemsList  gt       lt div ngIf  conditon item   gt   item   lt  div gt   lt  ng-container gt

User · Answer

Simplified way  Used only on small arrays because of performance issues  In large arrays you have to make the filter manually via code    See  https   angular io guide pipes appendix-no-filterpipe-or-orderbypipe   Pipe       name   filter      Injectable   export class FilterPipe implements PipeTransform       transform items  any    field   string  value   string   any             if   items  return           if   value    value length    0  return items        return items filter it   gt         it field  toLowerCase   indexOf value toLowerCase      -1             Usage    lt li  ngFor  let it of its   filter    name     value or variable   gt   it   lt  li gt    If you use a variable as a second argument  don t use quotes

User · Answer

A lot of you have great approaches  but the goal here is to be generic and defined a array pipe that is extremely reusable across all cases in relationship to  ngFor   callback pipe ts  don t forget to add this to your module s declaration array   import   PipeTransform  Pipe   from   angular core     Pipe       name   callback       pure  false    export class CallbackPipe implements PipeTransform       transform items  any    callback   item  any    gt  boolean   any           if   items     callback                return items                    return items filter item   gt  callback item              Then in your component  you need to implement a method with the following signuature  item  any     boolean  in my case for example  I called it filterUser  that filters users  age that are greater than 18 years    Your Component   Component             export class UsersComponent     filterUser user  IUser        return  user age  gt   18         And last but not least  your html code will look like this   Your HTML   lt li  ngFor  let user of users   callback  filterUser  gt   user name   lt  li gt    As you can see  this Pipe is fairly generic across all array like items that need to be filter via a callback  In mycase  I found it to be very useful for  ngFor like scenarios   Hope this helps     codematrix

User · Answer

This is my code   import  Pipe  PipeTransform  Injectable  from   angular core     Pipe       name   filter      Injectable   export class FilterPipe implements PipeTransform       transform items  any    field   string  value   any           if   items  return           if   value    value length     0  return items        return items filter it   gt        it field      value             Sample   LIST     id 1 name  abc    id 2 name  cba     FilterValue   1    lt span  ngFor  let listItem of LIST   filter    id    FilterValue  gt                                  listItem  name                              lt  span gt

User · Answer

After some googling  I came across ng2-search-filter   In will take your object and apply the search term against all object properties looking for a match

User · Answer

Here s an example that I created a while back  and blogged about  that includes a working plunk   It provides a filter pipe that can filter any list of objects   You basically just specify the property and value  key value  within your ngFor specification   It s not a lot different from  NateMay s response  except that I explain it in relatively verbose detail   In my case  I filtered an unordered list on some text  filterText  the user entered against the  label  property of the objects in my array with this sort of mark-up    lt ul gt     lt li  ngFor  let item of  items   filter  label  filterText   gt    item label    lt  li gt   lt  ul gt    https   long2know com 2016 11 angular2-filter-pipes

User · Answer

I was finding somethig for make a filter passing an Object  then i can use it like multi-filter     i did this Beauty Solution   filter pipe ts  import   PipeTransform  Pipe   from   angular core     Pipe     name   filterx     pure  false    export class FilterPipe implements PipeTransform    transform items  any  filter  any  isAnd  boolean   any     let filterx JSON parse JSON stringify filter      for  var prop in filterx        if  Object prototype hasOwnProperty call filterx  prop            if filterx prop                         delete filterx prop                     if   items     filterx      return items     return items filter function obj      return Object keys filterx  every function c        return obj c  toLowerCase   indexOf filterx c  toLowerCase        -1                     component ts  slotFilter any  start    practitionerCodeDisplay    practitionerName        componet html                lt tr gt                   lt th class  text-center  gt    lt input type  text    ngModel    slotFilter start  gt  lt  th gt                   lt th class  text-center  gt  lt input type  text    ngModel    slotFilter practitionerCodeDisplay  gt  lt  th gt                   lt th class  text-left  gt  lt input type  text    ngModel    slotFilter practitionerName  gt  lt  th gt                   lt th gt  lt  th gt                 lt  tr gt      lt tbody  ngFor  let item of practionerRoleList   filterx  slotFilter  gt

User · Answer

I ve created a plunker based off of the answers here and elsewhere    Additionally I had to add an  Input   ViewChild  and ElementRef of the  lt input gt  and create and subscribe   to an observable of it   Angular2 Search Filter  PLUNKR  UPDATE  plunker no longer works

User · Answer

This is your array   products  any                            name    John-Cena                                                 name    Brock-Lensar                       This is your ngFor loop  Filter By      lt input type  text    ngModel    filterText    gt       lt ul  ngFor  let product of filterProduct  gt         lt li gt   product name    lt  li gt       lt  ul gt    There I m using filterProduct instant of products  because i want to preserve my original data  Here model  filterText is used as a input box When ever there is any change setter function will call  In setFilterText performProduct is called it will return the result only those who match with the input  I m using lower case for case insensitive    filterProduct   this products   filterText   string      get filterText     string           return this  filterText             set filterText value   string            this  filterText   value          this filterProduct   this  filterText   this performProduct this  filterText    this products               performProduct value   string     any               value   value toLocaleLowerCase                return this products filter   products   any     gt                   products name toLocaleLowerCase   indexOf value      -1

User · Answer

You could also use the following    lt template ngFor let-item  ngForOf   itemsList  gt       lt div  ng-if  conditon item   gt  lt  div gt   lt  template gt    This will only show the div if your items matches the condition  See the angular documentation for more information  If you would also need the index  use the following    lt template ngFor let-item  ngForOf   itemsList  let-i  index  gt       lt div  ng-if  conditon item  i   gt  lt  div gt   lt  template gt

User · Answer

This is what I implemented without using pipe   component html   lt div  ngFor  let item of filter itemsList   gt    component ts   Component           export class YourComponent     filter itemList  yourItemType     yourItemType         let result  yourItemType               your filter logic here                     return result

User · Answer

Based on the very elegant callback pipe solution proposed above  it is possible to generalize it a bit further by allowing additional filter parameters to be passed along  We then have    callback pipe ts  import   Pipe  PipeTransform   from   angular core     Pipe     name   callback     pure  false    export class CallbackPipe implements PipeTransform     transform items  any    callback   item  any  callbackArgs   any      gt  boolean  callbackArgs   any     any       if   items     callback          return items            return items filter item   gt  callback item  callbackArgs            component  filterSomething something  Something  filterArgs  any        const firstArg   filterArgs 0     const secondArg   filterArgs 1           return  lt some condition based on something  firstArg  secondArg  etc  gt       html   lt li  ngFor  let s of somethings   callback   filterSomething     lt whatWillBecomeFirstArg gt    lt whatWillBecomeSecondArg gt         gt      s aProperty    lt  li gt

User · Answer

Basically  you write a pipe which you can then use in the  ngFor directive   In your component     filterargs    title   hello    items     title   hello world     title   hello kitty     title   foo bar       In your template  you can pass string  number or object to your pipe to use to filter on    lt li  ngFor  let item of items   myfilter filterargs  gt    In your pipe   import   Pipe  PipeTransform   from   angular core     Pipe       name   myfilter       pure  false    export class MyFilterPipe implements PipeTransform       transform items  any    filter  Object   any           if   items     filter                return items                       filter items array  items which match and return true will be            kept  false will be filtered out         return items filter item   gt  item title indexOf filter title      -1             Remember to register your pipe in app module ts  you no longer need to register the pipes in your  Component  import   MyFilterPipe   from    shared pipes my-filter pipe     NgModule       imports                          declarations            MyFilterPipe             providers                          bootstrap   AppComponent     export class AppModule       Here s a Plunker which demos the use of a custom filter pipe and the built-in slice pipe to limit results   Please note  as several commentators have pointed out  that there is a reason why there are no built-in filter pipes in Angular

[angular] How to apply filters to *ngFor?

Examples related to angular

Examples related to typescript