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
Table of Contents
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
1 | ng g pipe filterdata |
Copy the following code in filterdata.pipe.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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
1 2 3 4 5 6 7 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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> |
The result of custom search filter pipe angular 4 above will be like the following picture
To get the complete project above, please download from the following link
https://seegatesite.com/custom-filter-pipe-angular-4-example/
Another angular 4 tutorial : https://seegatesite.com/tag/tutorial-angular/
Leave a Reply