Angular 2 filter search list

Question

I m looking for the angular 2 way to do this   I simply have a list of items  and I want to make an input whos job is to filter the list    lt md-input placeholder  Item name       ngModel    name  gt  lt  md-input gt    lt div  ngFor  let item of items  gt    item name    lt  div gt    What s the actual way of doing this in Angular 2  Does that requires a pipe

User · Answer

Currently ng2-search-filter simplify this works.

By directive

<tr *ngFor="let item of items | filter:searchText">
  <td>{{item.name}}</td>
</tr>

Or programmatically

let itemsFiltered = new Ng2SearchPipe().transform(items, searchText);

Practical example: https://angular-search-filter.stackblitz.io

User · Answer

You can also create a search pipe to filter results   import   Pipe  PipeTransform   from   angular core     Pipe     name    searchPipe      export class SearchPipe implements PipeTransform     public transform value  key  string  term  string        return value filter  item    gt          if  item hasOwnProperty key             if  term              let regExp   new RegExp    b    term   gi              return regExp test item key              else             return true                    else           return false                          Use pipe in HTML     lt md-input placeholder  Item name       ngModel    search   gt  lt  md-input gt   lt div  ngFor  let item of items   searchPipe  name  search   gt      item name    lt  div gt

User · Answer

Search by multiple fields  Assuming Data   items             id  1      text   First item               id  2      text   Second item               id  3      text   Third item           Markup    lt input   ngModel    query  gt   lt div  ngFor  let item of items   search  id text  query  gt   item text   lt  div gt    Pipe   import  Pipe  PipeTransform  from   angular core     Pipe     name   search     export class SearchPipe implements PipeTransform     public transform value  keys  string  term  string         if   term  return value      return  value        filter item   gt  keys split      some key   gt  item hasOwnProperty key   amp  amp  new RegExp term   gi   test item key               One line for everything

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

lt md-input placeholder  Item name       ngModel    name   keyup   filterResults    gt  lt  md-input gt    lt div  ngFor  let item of filteredValue  gt    item name    lt  div gt     filterResults         if   this name          this filteredValue       this items         else         this filteredValue             this filteredValue   this items filter  item    gt            return item name toUpperCase   indexOf this name toUpperCase     gt  -1                       Don t do any modification on  items  array list of items from which results are filtered   When searched item  name  is empty return the complete list of  items   if not compare the  name  with every  name  in the  items   array and filter out only the name that is present in  items  array and store it in the  filteredValue

User · Answer

data  names     Prashobh   Abraham   Anil   Sam   Natasha   Marry   Zian   karan     You can achieve this by creating a simple pipe   lt input type  text    ngModel    queryString  id  search  placeholder  Search to type  gt    Pipe  import   Pipe  PipeTransform   from   angular core     Pipe       name   FilterPipe      export class FilterPipe implements PipeTransform       transform value  any  input  string            if  input                input   input toLowerCase                return value filter function  el  any                    return el toLowerCase   indexOf input   gt  -1                                   return value            This will filter the result based on the search term  More Info

User · Answer

You have to manually filter result based on change of input each time by keeping listener over input event  While doing manually filtering make sure you should maintain two copy of variable  one would be original collection copy  amp  second would be filteredCollection copy  The advantage for going this way could save your couple of unnecessary filtering on change detection cycle  You may see a more code  but this would be more performance friendly   Markup - HTML Template   lt md-input  myInput placeholder  Item name       ngModel    name   input   filterItem myInput value   gt  lt  md-input gt    lt div  ngFor  let item of filteredItems  gt       item name    lt  div gt    Code  assignCopy       this filteredItems   Object assign     this items     filterItem value      if  value          this assignCopy            when nothing has typed    this filteredItems   Object assign     this items  filter        item   gt  item name toLowerCase   indexOf value toLowerCase     gt  -1        this assignCopy     when you fetch collection from server

User · Answer

try this html code   lt md-input  myInput placeholder  Item name       ngModel    name  gt  lt  md-input gt    lt div  ngFor  let item of filteredItems   search  name  gt       item name    lt  div gt    use search pipe  import   Pipe  PipeTransform   from   angular core     Pipe     name   search     export class SearchPipe implements PipeTransform      transform value  any  args   any   any        if  value return null      if  args return value       args   args toLowerCase         return value filter function item           return JSON stringify item  toLowerCase   includes args

User · Answer

Slight modification to  Mosche answer  for handling if there exist no filter element   TS     import   Pipe  PipeTransform   from   angular core     Pipe       name   filterFromList     export class FilterPipe implements PipeTransform       public transform value  keys  string  term  string             if   term                return value                   let res    value        filter  item    gt  keys split      some key   gt  item hasOwnProperty key   amp  amp  new RegExp term   gi   test item key              return res length   res    -1                 Now  in your HTML you can check via  -1  value  for no results    HTML    lt div  ngFor  let item of list   filterFromList   attribute   inputVariableModel  gt               lt mat-list-item  ngIf  item     -1  gt                   lt h4 mat-line class  inline-block  gt                     item                    lt  h4 gt               lt  mat-list-item gt               lt mat-list-item  ngIf  item     -1  gt                  No Matches              lt  mat-list-item gt           lt  div gt

User · Answer

This code nearly worked for me   but I wanted a multiple element filter so my mods to the filter pipe are below   import   Pipe  PipeTransform  Injectable   from   angular core     Pipe   name   jsonFilterBy      Injectable   export class JsonFilterByPipe implements PipeTransform      transform json  any    args  any     any         const searchText   args 0       const jsonKey   args 1       let jsonKeyArray            if  searchText    null    searchText      undefined     return json         if  jsonKey indexOf       gt  0            jsonKey split      forEach  function key                jsonKeyArray push key trim                       else           jsonKeyArray push jsonKey trim                if  jsonKeyArray length     0    return json            Start with new Array and push found objects onto it      let returnObjects           json forEach  function   filterObjectEntry              jsonKeyArray forEach  function  jsonKeyValue                if   typeof filterObjectEntry jsonKeyValue       undefined   amp  amp              filterObjectEntry jsonKeyValue  toLowerCase   indexOf searchText toLowerCase     gt  -1                        object value contains the user provided text                  returnObjects push filterObjectEntry                                                  return returnObjects           Now  instead of   jsonFilterBy   searchText   name     you can do  jsonFilterBy   searchText   name  other  other2

User · Answer

HTML   lt input   ngModel      searchTerm   ngModelChange     search     gt   lt div  ngFor    let item of items  gt   item name   lt  div gt    Component  search    void       let term   this searchTerm      this items   this itemsCopy filter function tag            return tag name indexOf term   gt   0               Note that this itemsCopy is equal to this items and should be set before doing the search

User · Answer

In angular 2 we don t have pre-defined filter and order by as it was with AngularJs  we need to create it for our requirements  It is time killing but we need to do it   see No FilterPipe or OrderByPipe   In this article we are going to see how we can create filter called pipe in angular 2 and sorting feature called Order By  Let s use a simple dummy json data array for it  Here is the json we will use for our example  First we will see how to use the pipe  filter  by using the search feature   Create a component with name category component ts   x000D   x000D      import   Component  OnInit   from   angular core   x000D       Component   x000D        selector   app-category   x000D        templateUrl     category component html  x000D         x000D      export class CategoryComponent implements OnInit   x000D   x000D        records  Array lt any gt   x000D        isDesc  boolean   false  x000D        column  string    CategoryName   x000D        constructor       x000D   x000D        ngOnInit     x000D          this records    x000D              CategoryID  1   CategoryName   Beverages   Description   Coffees  teas     x000D              CategoryID  2   CategoryName   Condiments   Description   Sweet and savory sauces     x000D              CategoryID  3   CategoryName   Confections   Description   Desserts and candies     x000D              CategoryID  4   CategoryName   Cheeses    Description   Smetana  Quark and Cheddar Cheese     x000D              CategoryID  5   CategoryName   Grains Cereals   Description   Breads  crackers  pasta  and cereal     x000D              CategoryID  6   CategoryName   Beverages   Description   Beers  and ales     x000D              CategoryID  7   CategoryName   Condiments   Description   Selishes  spreads  and seasonings     x000D              CategoryID  8   CategoryName   Confections   Description   Sweet breads     x000D              CategoryID  9   CategoryName   Cheeses    Description   Cheese Burger     x000D              CategoryID  10  CategoryName   Grains Cereals   Description   Breads  crackers  pasta  and cereal    x000D              x000D              this sort this column   x000D          x000D        x000D   lt div class  col-md-12  gt  x000D     lt table class  table table-responsive table-hover  gt  x000D       lt tr gt  x000D         lt th  gt Category ID lt  th gt  x000D         lt th gt Category lt  th gt  x000D         lt th gt Description lt  th gt  x000D       lt  tr gt  x000D       lt tr  ngFor  let item of records  gt  x000D         lt td gt   item CategoryID   lt  td gt  x000D         lt td gt   item CategoryName   lt  td gt  x000D         lt td gt   item Description   lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D    2 Nothing special in this code just initialize our records variable with a list of categories  two other variables isDesc and column are declared which we will use for sorting latter  At the end added this sort this column   latter we will use  once we will have this method   Note templateUrl     category component html   which we will create next to show the records in tabluar format   For this create a HTML page called category component html  whith following code   3 Here we use ngFor to repeat the records and show row by row  try to run it and we can see all records in a table   Search - Filter Records  Say we want to search the table by category name  for this let s add one text box to type and search   x000D   x000D   lt div class  form-group  gt  x000D     lt div class  col-md-6   gt  x000D       lt input type  text    ngModel    searchText   x000D             class  form-control  placeholder  Search By Category    gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    5 Now we need to create a pipe to search the result by category because filter is not available as it was in angularjs any more   Create a file category pipe ts and add following code in it    x000D   x000D      import   Pipe  PipeTransform   from   angular core   x000D       Pipe   name   category     x000D      export class CategoryPipe implements PipeTransform   x000D        transform categories  any  searchText  any   any   x000D          if searchText    null  return categories  x000D   x000D          return categories filter function category   x000D            return category CategoryName toLowerCase   indexOf searchText toLowerCase     gt  -1  x000D             x000D          x000D        x000D   x000D   x000D    6 Here in transform method we are accepting the list of categories and search text to search filter record on the list  Import this file into our category component ts file  we want to use it here  as follows    x000D   x000D  import   CategoryPipe   from    category pipe   x000D   Component         x000D    selector   app-category   x000D    templateUrl     category component html   x000D    pipes   CategoryPipe       This Line        x000D     x000D   x000D   x000D    7 Our ngFor loop now need to have our Pipe to filter the records so change it to this You can see the output in image below  enter image description here

[angular] Angular 2 filter/search list

Examples related to angular