Angular 4 Tutorial Create Custom Search Filter Pipe In HTML Table

I will share how to create custom search filter pipe on angular 4 to fellow beginners like me. The filter feature on the angularJS has been omitted on angular 2 and 4. To create a data filter on angular 4 requires the support of a pipe. You can use a pipe to filter the data in HTML table. Follow this short tutorial

What is a PIPE?

I will not discuss what a pipe is. All the full explanations of the angular pipe are documented on the official Angular 4 website. In essence, the pipe is the same as the filters on the angularjs, and the pipe has a feature that allows us to transform or convert or format data in real-time. Without the help of pipe, we can not create custom filters on angular 4.

As in previous versions, Angular also provides several built-in Pipes that can be used directly like DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. Sometimes we need a Pipe that suits our needs.

In this tutorial will create a custom search to filter data on HTML table

Another article: Simple Login Form Angular 4 Tutorial For Beginner

Custom search filter pipe angular 4 tutorials for beginner

Note: in this tutorial, I use ng-cli generator to create a pipe

Create a new pipe with the following command

ng g pipe filterdata

1	ng g pipe filterdata

Copy the following code in filterdata.pipe.ts

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

@Pipe({
  name: 'filterdata'
})
export class FilterdataPipe implements PipeTransform {

  transform(items: any[], value: string, label:string): any[] {
    if (!items) return [];
    if (!value) return  items;
    if (value == '' || value == null) return [];
    return items.filter(e => e[label].toLowerCase().indexOf(value) > -1 );
    
  }

}

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

@Pipe({

name: 'filterdata'

})

export class FilterdataPipe implements PipeTransform {

transform(items: any[], value: string, label:string): any[] {

if (!items) return [];

if (!value) return items;

if (value == '' || value == null) return [];

return items.filter(e => e[label].toLowerCase().indexOf(value) > -1 );

}

Do not forget to import the above pipe in app.module.ts (If you use ng-cli generator, pipe automatically added to app.module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FilterdataPipe } from './filterdata.pipe';

@NgModule({
  declarations: [
    FilterdataPipe
  ],
  imports: [ ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FilterdataPipe } from './filterdata.pipe';

@NgModule({

declarations: [

FilterdataPipe

imports: [ ],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Example of using pipe above, please add new object and copy the following code in app.component.ts

listofstudent = [
          {id:"1", name:"icha",age:"20"},
          {id:"2", name:"denok",age:"23"},
          {id:"3", name:"sri utami",age:"10"},
          {id:"4", name:"mbok darmi",age:"40"},
          {id:"5", name:"jeniffer",age:"30"},
          {id:"6", name:"limbuk",age:"22"}];

listofstudent = [

{id:"1", name:"icha",age:"20"},

{id:"2", name:"denok",age:"23"},

{id:"3", name:"sri utami",age:"10"},

{id:"4", name:"mbok darmi",age:"40"},

{id:"5", name:"jeniffer",age:"30"},

{id:"6", name:"limbuk",age:"22"}];

Add the following html script in app.component.html

<table border =1>
  <thead>
    <tr>
      <th colspan="4">Search :
        <input type="text" [(ngModel)]="queryString">
      </th>
    </tr>
    <tr>
      <th style="width:40px;max-width:40px;">#</th>
      <th style="width:60px;max-width:100px;">Name</th>
      <th style="width:60px;max-width:50px;">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let ex of  listofstudent| filterdata: queryString : 'name' ; let i = index ">
      <td>{{i+1}}</td>
      <td>{{ex.name}}</td>
      <td>{{ex.age}}</td>
    </tr>
  </tbody>

</table>