Writing a custom table filter in Angular 6

Question

I wanted to add a custom table filter to my angular code. Did web search and found this blog post:

https://www.code-sample.com/2018/07/angular-6-search-filter-pipe-table-by.html

It works pretty well and here the pipe code:

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

@Pipe({
  name: 'gridFilter'
})

/*
 I got this code from here:
 https://www.code-sample.com/2018/07/angular-6-search-filter-pipe-table-by.html
*/

export class GridFilterPipe implements PipeTransform {
  transform(items: any, filter: any, defaultFilter: boolean): any {
    if (!filter){
      return items;
    }

    if (!Array.isArray(items)){
      return items;
    }

    if (filter && Array.isArray(items)) {
      let filterKeys = Object.keys(filter);

      if (defaultFilter) {
        return items.filter(item =>
            filterKeys.reduce((x, keyName) =>
                (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
      }
      else {
        return items.filter(item => {
          return filterKeys.some((keyName) => {
            return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
          });
        });
      }
    }
  }
}

It works pretty well for most of my needs except this one table that is this html:

  
    
    {{ element | titlecase }}
    
      
          
        
        
          {{ element | titlecase }} Name 
          Site 
          Action
        
        
        
        
            {{el.name}}
            {{ getSiteName(el.site) }}

The issue with the above table is this. To display the site name of a location I use this html ...

{{ getSiteName(el.site) }}

... which calls a method getSiteName which takes the id of a site and returns the site's name. I do not know how to set my gridFilter. So if I try to search for a site name my gridFilter doesn't find the site.

Here is my stackblitz for this: https://stackblitz.com/edit/angular-damcul

** UPDATE **

I have updated my stackblitz to actually illustrate the problem I am having. Here is a screen shot of the stackblitz app:

I can search for locations and here is the screen shot of me searching for 'loc_2':

But I can not search for sites. Here the screen shot of me searching for any 'site'.

Akber Iqbal · Accepted Answer

made some changes:

in your shared code in the question, you had used filter named grdFilter, in your stackblitz it was 'gridFilter'
implementation of getSiteName was added, which takes in the object and returns the blog name (there is no property named 'site' in our data)
in your shared code in the question, you had

since there is no property named 'site' in our data, we changed it to

relevant hello.componenet.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `


  
    {{i +1}}
    {{emp.name}}
    {{emp.Age}}
    {{emp.blog}}
  



      
  
    
      {{ element | titlecase }} Name 
      Site 
      Action
    
  
  
    
        {{el.name}}
        {{ getSiteName(el) }}
        
          
        
        
      
      
    
  

`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  public searchText: string;
  public customerData: any;

  @Input() name: string;

  constructor() { }

  ngOnInit() {
    this.customerData = [
      { "name": 'Anil kumar', "Age": 34, "blog": 'https://code-view.com' },
      { "name": 'Sunil Kumar Singh', "Age": 28, "blog": 'https://code-sample.xyz' },
      { "name": 'Sushil Singh', "Age": 24, "blog": 'https://code-sample.com' },
      { "name": 'Aradhya Singh', "Age": 5, "blog": 'https://code-sample.com' },
      { "name": 'Reena Singh', "Age": 28, "blog": 'https://code-sample.com' },
      { "name": 'Alok Singh', "Age": 35, "blog": 'https://code-sample.com' },
      { "name": 'Dilip Singh', "Age": 34, "blog": 'https://code-sample.com' }];
  }
  getSiteName(passedObj) {
    return passedObj.blog;
  }
}

update #1 in light of questioner's comment & updated question:

if you go to the grd-pipe.ts file, and do console.log(items,filter), you'll see that the array that we're working on inside the custom pipe is the locations array, which has the 'sites' column values as 1, 2 or 3. The site name which you have fetched for the UI from sites array is not part of the locations array and hence can't be processed by the pipe.

So, we create a new field siteName in the locations array where we store the site name (from sites array), now since the field is available inside the pipe, the pipe can search on it also.

relevant changes in TS

ngOnInit(){
for(var i=0;i s.id === this.locations[i].site).name;
      }
}

relevant changes in HTML the added field siteName added to the filter:


      
  
    
        {{i +1}}
        {{loc.name}}
        {{getSiteName(loc.site)}}

working stackblitz here is also updated

Writing a custom table filter in Angular 6

Answers (1)

Related Questions