Angular 4 Pipe Filter

Question

I am trying to use a custom pipe to filter my  ngFor loop using an input field with ngModel  With my other custom pipe  sortBy   it works perfectly fine  However  the filter pipe seems to make it that none of the data appears  I m still learning this  and I tried a few variations to no avail   -filter  term -filter    term   -filter   term  -filter     term      So I think the problem may lie elsewhere in the code  If anyone can help I d really appreciate it   Here is my code   HTML Component   lt div style  text-align center  gt     lt h1 gt      Welcome to   title        lt  h1 gt    lt  div gt   lt h2 gt Please choose your favorite song   lt  h2 gt   lt form id  filter  gt       lt label gt Filter people by name  lt  label gt       lt input type  text  name  term    ngModel    term    gt   lt  form gt     lt table class  table  gt       lt thead gt         lt tr gt           lt th gt Title lt  th gt           lt th gt Artist lt  th gt           lt th gt Likes lt  th gt         lt  tr gt       lt  thead gt       lt tbody gt         lt tr  ngFor  let song of songs   filter term  sortBy   likes   let i    index  gt           lt td gt   song title   lt  td gt           lt td gt   song artist   lt  td gt           lt td gt   song likes                  lt i class  fa fa-heart-o  aria-hidden  true    ngIf  song likes  lt  1  gt  lt  i gt            lt i class  fa fa-heart  aria-hidden  true   ngIf  song likes  gt   1  gt  lt  i gt                lt i class  fa fa-plus  aria-hidden  true   click   addLike i    gt  lt  i gt               lt i class  fa fa-minus  aria-hidden  true   click   removeLike i    gt  lt  i gt              lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt    PIPE  import   Pipe  PipeTransform   from   angular core     Pipe       name   filter       pure  false     export class FilterPipe implements PipeTransform       transform items  any    args  any     any           return items filter item   gt  item id indexOf args 0       -1             Module  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core    import   AppComponent   from    app component   import   SortByPipe   from    sort-by pipe   import   FilterPipe   from    filter pipe   import   FormsModule  ReactiveFormsModule   from   angular forms   import   Pipe  PipeTransform   from   angular core       NgModule     declarations        AppComponent      SortByPipe     FilterPipe        imports        BrowserModule      FormsModule        providers        bootstrap   AppComponent     export class AppModule       JS COMPONENT  import   Component   from   angular core     Component     selector   app-root     templateUrl     app component html     styleUrls      app component css       export class AppComponent     title    Oxcord     songs         title   Song   artist   Artist   likes  1      title   Chanson   artist   Artiste   likes  3      title   ABC   artist   OneTwoThree   likes  2      title   Trash   artist   Meek Mill   likes  0          addLike input     this songs input  likes   1     removeLike input     this songs input  likes - 1     args  Me

User · Answer

The transform method signature changed somewhere in an RC of Angular 2. Try something more like this:

export class FilterPipe implements PipeTransform {
    transform(items: any[], filterBy: string): any {
        return items.filter(item => item.id.indexOf(filterBy) !== -1);
    }
}

And if you want to handle nulls and make the filter case insensitive, you may want to do something more like the one I have here:

export class ProductFilterPipe implements PipeTransform {

    transform(value: IProduct[], filterBy: string): IProduct[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
        return filterBy ? value.filter((product: IProduct) =>
            product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
    }
}

And NOTE: Sorting and filtering in pipes is a big issue with performance and they are NOT recommended. See the docs here for more info: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

User · Answer

I know this is old  but i think i have good solution  Comparing to other answers and also comparing to accepted  mine accepts multiple values  Basically filter object with key value search parameters  also object within object   Also it works with numbers etc  cause when comparing  it converts them to string    import   Pipe  PipeTransform   from   angular core     Pipe  name   filter    export class Filter implements PipeTransform       transform array  Array lt Object gt   filter  Object   any           let notAllKeysUndefined   false          let newArray                if array length  gt  0                for  let k in filter                   if  filter hasOwnProperty k                         if filter k     undefined  amp  amp  filter k                                   for  let i   0  i  lt  array length  i                                  let filterRule   filter k                                if typeof filterRule      object                                     for let fkey in filterRule                                        if  filter k  hasOwnProperty fkey                                             if filter k  fkey     undefined  amp  amp  filter k  fkey                                                       if this shouldPushInArray array i  k  fkey   filter k  fkey                                                      newArray push array i                                                                                              notAllKeysUndefined   true                                                                                                                                                  else                                   if this shouldPushInArray array i  k   filter k                                          newArray push array i                                                                      notAllKeysUndefined   true                                                                                                                            if notAllKeysUndefined                    return newArray                                   return array             private shouldPushInArray item  filter            if typeof filter      string                 item   item toString                filter   filter toString                          Filter main logic         item   item toLowerCase            filter   filter toLowerCase            if item indexOf filter      -1                return true                    return false

User · Answer

Pipes in Angular 2  are a great way to transform and format data right from your templates   Pipes allow us to change data inside of a template  i e  filtering  ordering  formatting dates  numbers  currencies  etc  A quick example is you can transfer a string to lowercase by applying a simple filter in the template code   List of Built-in Pipes from API List Examples     user name   uppercase        Example of Angular version 4 4 7  ng version    Custom Pipes which accepts multiple arguments   HTML     ngFor  let student of students   jsonFilterBy  searchText   name     TS      transform json  any    args  any      any             Filtering the content using a Pipe    json-filter-by pipe ts    import   Pipe  PipeTransform  Injectable   from   angular core     Pipe   name   jsonFilterBy      Injectable   export class JsonFilterByPipe implements PipeTransform      transform json  any    args  any      any         var searchText   args 0       var jsonKey   args 1           json   undefined  args    2   undefined   name       if searchText    null    searchText     undefined   return json      if jsonKey       null    jsonKey        undefined   return json          Copy all objects of original array into new Array      var returnObjects   json      json forEach  function   filterObjectEntery            if  filterObjectEntery hasOwnProperty  jsonKey               console log  Search key is available in JSON object              if   typeof filterObjectEntery jsonKey      undefined   amp  amp           filterObjectEntery jsonKey  toLowerCase   indexOf searchText toLowerCase     gt  -1                    object value contains the user provided text            else                  object didn t match a filter value so remove it from array via filter             returnObjects   returnObjects filter obj   gt  obj     filterObjectEntery                     else           console log  Search key is not available in JSON object                         return returnObjects            Add to  NgModule    Add JsonFilterByPipe to your declarations list in your module  if you forget to do this you ll get an error no provider for jsonFilterBy  If you add to module then it is available to all the component s of that module      NgModule     imports        CommonModule      RouterModule      FormsModule  ReactiveFormsModule         providers    StudentDetailsService      declarations        UsersComponent  UserComponent       JsonFilterByPipe         exports    UsersComponent  UserComponent     export class UsersModule                    File Name  users component ts and StudentDetailsService is created from this link     import   MyStudents   from          services student my-students   import   Component  OnInit  OnDestroy   from   angular core   import   StudentDetailsService   from        services student student-details service     Component     selector   app-users     templateUrl     users component html     styleUrls       users component css        providers  StudentDetailsService     export class UsersComponent implements OnInit  OnDestroy       students  MyStudents      selectedStudent  MyStudents     constructor private studentService  StudentDetailsService         ngOnInit    void       this loadAllUsers          ngOnDestroy    void          ONDestroy to prevent memory leaks        loadAllUsers    void       this studentService getStudentsList   then students   gt  this students   students          onSelect student  MyStudents   void       this selectedStudent   student             File Name  users component html     lt div gt       lt br   gt       lt div class  form-group  gt           lt div class  col-md-6   gt              Filter by Name                lt input type  text    ngModel    searchText                      class  form-control  placeholder  Search By Category    gt           lt  div gt       lt  div gt        lt h2 gt Present are Students lt  h2 gt       lt ul class  students  gt       lt li  ngFor  let student of students   jsonFilterBy  searchText   name      gt           lt a  ngIf  student  routerLink   users update   student id    gt               lt span class  badge  gt   student id   lt  span gt    student name   uppercase            lt  a gt       lt  li gt       lt  ul gt   lt  div gt

User · Answer

Here is a working plunkr with a filter and sortBy pipe  https   plnkr co edit vRvnNUULmBpkbLUYk4uw p preview  As developer033 mentioned in a comment  you are passing in a single value to the filter pipe  when the filter pipe is expecting an array of values  I would tell the pipe to expect a single value instead of an array  export class FilterPipe implements PipeTransform       transform items  any    term  string   any              I am unsure what id is here  did you mean title          return items filter item   gt  item id indexOf term      -1             I would agree with DeborahK that impure pipes should be avoided for performance reasons  The plunkr includes console logs where you can see how much the impure pipe is called

[angular] Angular 4 Pipe Filter

Examples related to angular

Examples related to angular-pipe