Angular 4 Filter Search Custom Pipe

Question

So I am trying to build a custom pipe to do a search filter of multiple values in a ngFor loop. I have looked for a number of hours for a good working example, and most of t

Answer 1

Here is simple explanation to create custom pipe..as available pipes does not support it. I found this solution here..Nicely explained it

Create pipe file advanced-filter.pipe

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

@Pipe({
  name: 'advancedFilters'
})

export class AdvancedFilterPipe implements PipeTransform {

  transform(array: any[], ...args): any {
    if (array == null) {
      return null;
    }

    return array.filter(function(obj) {
      if (args[1]) {
        return obj.status === args[0];
      }
      return array;
    });

  }

}

Here, array – will be data array passed to your custom pipe obj – will be the object of data by using that object you can add condition to filter data

We have added condition obj.status === args[0] so that data will get filter on status which is passed in .html file

Now, import and declare custom pipe in module.ts file of component:

import {AdvancedFilterPipe} from './basic-filter.pipe';

//Declare pipe

@NgModule({

    imports: [DataTableModule, HttpModule, CommonModule, FormsModule, ChartModule, RouterModule],

    declarations: [ DashboardComponent, AdvancedFilterPipe],

    exports: [ DashboardComponent ],

    providers: [{provide: HighchartsStatic}]

})

Use of created custom angular pipe in .html file

                                                


                

                       

                             

                                 Origin
                             
                        
                

                


                                
                                      

                                                                
{{ item.trn_date }}

                                                                
{{ item.trn_ref }}

                                                

                




//If you are using *ngFor and want to use custom angular pipe then below is code


  {{ num | ordinal }}