Working with Pipe in Angular2
Posted By : Pankaj Kumar Thakur | 22-Jun-2017
Hi,
If you are familiar with angularjs, you must have the knowledge of how to handle data using filters.
This old concept of angularjs filters become pipe in angular2.
So let's start with this great concept…
Pipes
Data is the most important part of every application, and the main task is to get data manipulate data and show them to users.
Once data arrive you could push values directly to the view like this
Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)
But in most use cases user prefer to see a data in a simple format like February 04, 1990.
To solve this angular2 provide a great concept of filtering of data called pipes.
So let’s take an example on it.
Suppose a user enter date in this format
birthday = new Date(1990,2,04);
And he/she want to see in a simple
February 04,1990
so in our template we use like this
template: `<p>My birthday is {{birthday | date }}</p>`
In this example, we use the pipe operator in the left side of the date pipe function.
Date pipe takes the data and converts it into human readable form.
From Filters To Pipes
Angularjs filter is helpful to formatting output in our template, with angular2 we have great features of old filters with some additional filters.
The table shown below describes the new and old filters/pipes in angular2 and angular js.
Filters/pipes |
Angularjs 1.x |
Angular2
|
|
Currency |
yes |
yes |
|
Uppercase |
yes |
yes |
|
Date |
yes |
yes |
|
Json |
yes |
yes |
|
Lowercase |
yes |
yes |
|
Number |
yes |
no |
|
Order by |
yes |
no |
|
Filter |
yes |
no |
|
Async |
no |
yes |
|
Decimal |
no |
yes |
|
Percent |
no |
yes |
|
|
|
|
|
New Pipes
Angular2 have new additional pipes called decimal and percent async , these take an argument that describes the “digit info” that should be used -- that is , how many integer and fraction digits the number should be formatted with.
The “decimal” pipe is accessed using “number” in our templates.
Built-In-pipes
Angular2 has many built in pipe, which can be used as a simple or regular filter like
DatePipes, CurrencyPipes, LowercasePipes, UppercasePipes etc.
For example: suppose we take data in lowercase and display it into uppercase then we use the UppercasePipe.
Name :string = “pankaj”
<p>My name is {{name | uppercase}}</p>
Result: PANKAJ.
Parameterizing a pipe
A pipe can take any number of optional parameters to fine tune the result.
For example: suppose our date of birth is 04 February 1990, but we want to display it into a format like this 02/04/1990.
So here we use the optional parameters with DatePipes like mm/dd/yy.
birthday = new Date(04/02/1990)
<p> My birthday is {{ birthday | date : ”mm/dd/yy”}} </p>
So it displays 02/04/1990.
Chaining of pipes
Chaining of pipe means use multiple pipes to display data
For example :
<p>My birthday is {{birthday | date}}</p>
It displays the output like 04 February 1990.
But we want to show month name in uppercase
In this situation, we can use chaining of pipes
<p>My birthday is {{ birthday | date | uppercase }}</p>
After chaining it display 04 FEBRUARY 1990.
Custom Pipes
In our previous example, we used built-in-pipes , but a situation occurs when user display data on application point of view ( requirement of our application ).
In this case we create our custom pipes or filters.
For example: suppose we have records of hundred students, and we want to access the details of only one student.
It can be achieved using two way
Step 1: -Traverse the each student record one by one ,and display it.
But it’s a very cumbersome job.
Step 2: - Create a custom filter with pipes and apply the business logic for searching the student.
The following figure shows the list of student.
And in this figure, we search for an individual student
In our template we used the following code
<table>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th>profession</th>
</tr>
<tr *ngFor="let tea of teacherData | filter:search">
<td>{{tea.name}}</td>
<td>{{tea.address}}</td>
<td>{{tea.email}}</td>
<td>{{tea.profession}}</td>
</tr>
</table>
And the main business logic for custom filters is written in app.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(teacherData: any, search: any): any {
if(search === undefined )return teacherData;
return teacherData.filter(function(tea:any){
return tea.name.toLowerCase().includes(search.toLowerCase());
})
}
}
In this code user search for a user if search box don't contain any input then it render all student data with details but when we start to search a particular student and enter letters of his/her starting name it displays the related student data.
To be continue...
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Pankaj Kumar Thakur
Pankaj is a MEAN stack developer and expertise in Front-End for web application using Angulajs,Angularjs2/4 with Framework Ionic,Bootstarp,Javascript and Html5 css3, Singing and Reading are includes in his Hobbies.