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…

 

photo-ref

 

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.

screencapture-localhost-3000-1498042425478.png

 

And in this figure, we search for an individual student

aftersearch.png

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...

 

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..