Post
Ask Question

Pipes In Angular And How To Create Custom Pipes

Filters in Angular JS are known as Pipes in Angular 2.

Pipes in Angular 2 are used to transform the output data before displaying to the web page same as filters are used in Angular JS. We need to use the pipe character “|” to apply on property.

Angular 2 introduced a lot of built-in pipes like –

  • Date Pipe
  • Uppercase Pipe
  • Lowercase Pipe
  • Currency Pipe & many more

Let’s take the same “student” component examples which I have been using so far in my previous articles.

Date Pipe

Date Pipe in Angular 2 is used for transforming the output date before displaying. For example, we have the below student list and we want to apply the date pipe on DOB.

  1. { studentID: 1, studentName: 'Steve', gender: 'Male', age: 35, course: 'MCA', DOB: '10/12/1982', grade: 0.7500, rating: 7.5123 },  
  2. { studentID: 2, studentName: 'Bobby', gender: 'Male', age: 32, course: 'MBA', DOB: '12/1/1985', grade: 0.7850, rating: 7.8223 },  
  3. { studentID: 3, studentName: 'Rina', gender: 'Female', age: 45, course: 'B.Tech', DOB: '9/11/1972', grade: 0.8525, rating: 8.5263 },  
  4. { studentID: 4, studentName: 'Alex', gender: 'Female', age: 24, course: 'M.Tech', DOB: '1/1/1993', grade: 0.5540, rating: 5.5123 },  
  5. { studentID: 5, studentName: 'Rahul', gender: 'Male', age: 26, course: 'MCA', DOB: '1/21/1991', grade: 0.9550, rating: 9.5534 },  

To apply date pipe, use the following command.

<td>{{s.DOB | date }}</td>

Output

Angular

Date Pipe with parameters

A pipe can accept any number of optional parameters to format its output. Suppose we want to format date here, we can use parameter here using colon “:” character.

Example 1.

<td>{{s.DOB | date:'MM/dd/y' }}</td>

Output

Angular

Example 2.

<td>{{s.DOB | date:'yMMMMd' }}</td>

Output

Angular

Uppercase & Lowercase Pipe

Uppercase & Lowercase pipes are used to transform the text output into uppercase and lowercase respectively. To transform “Student Name” into uppercase letters and “Gender” in lowercase letters, we use the following command. 

  1. <td>{{s.studentName | uppercase}}</td>  
  2. <td>{{s.gender | lowercase}}</td>  

Output

Angular

Percent & Decimal Pipes

The Percent and Decimal pipes are newly introduced in Angular 2. These both take a parameter to describe how many integer and fraction digits the number should be formatted with. The parameter we pass for formatting follows this pattern –

Property | { minIntegerDigits }.{ minFractionDigits } - { maxFractionDigits }

The decimal pipe is accessed using Number as shown below –

Student.component.html

  1. <table>  
  2.     <thead>  
  3.         <tr>  
  4.             <th>Index</th>  
  5.             <th>Student ID</th>  
  6.             <th>Name</th>  
  7.             <th>Gender</th>  
  8.             <th>Age</th>  
  9.             <th>Course</th>   
  10.             <th>DOB</th>     
  11.             <th>Grade</th>   
  12.             <th>Rating</th>           
  13.         </tr>  
  14.     </thead>  
  15.     <tbody>  
  16.         <tr *ngFor="let s of students;">  
  17.             <td>{{i}}</td>  
  18.             <td>{{s.studentID}}</td>  
  19.             <td>{{s.studentName | uppercase}}</td>  
  20.             <td>{{s.gender | lowercase}}</td>  
  21.             <td>{{s.age}}</td>  
  22.             <td>{{s.course}}</td>  
  23.             <td>{{s.DOB | date:'yMMMMd' }}</td>  
  24.             <td>{{s.grade | percent:'.2'}}</td>  
  25.             <td>{{s.rating | number:'2.1-2'}}</td> // Pipe with multi-parameters  
  26.         </tr>  
  27.     </tbody>  
  28. </table>  

Output

Angular

Pipes Chaining in Angular 2

We can chain pipes together by using multiple pipes, like below.

  1. <td>{{s.DOB | date:'yMMMMd' | uppercase }}</td>  

Output

Angular

Custom Pipes in Angular 2

In Angular 2, we can create custom pipes to transform our data according to us. Let’s understand this with the help of below example.

Angular

Suppose we have student records as shown in table format. And we want to categorize students into Graduation or Post-graduation categories according to their course. That means - we want to transform the Course column data like below.

Angular

Let’s understand with the following steps how we can achieve this with the help of custom pipe –

  1. Let’s create a separate TypeScript class file named “coursepipe.ts” to create the custom pipe “studentCoursePipe”. Copy the following code in the file.

    student.coursepipe.ts
    1. import {Pipe, PipeTransform} from '@angular/core'  
    2.   
    3. @Pipe({  
    4.     name:'courseCategory'  
    5. })  
    6. export class courseCategoryPipe implements PipeTransform {  
    7.   
    8.     transform(value: string):string  
    9.     {  
    10.         if (value.toLowerCase() == "mca" || value.toLowerCase() == "mba" || value.toLowerCase() == "m.tech") {  
    11.             return value + " : Post-Graduation";  
    12.         }  
    13.         else if (value.toLowerCase() == "b.tech") {  
    14.             return value + " : Graduation";  
    15.         }  
    16.     }}  
    Let’s understand the code via below screenshot.

    Angular
  1. Register “courseCategoryPipe” in the Angular app module to use. In the module.ts file, import “courseCategoryPipe” and include it in the declaration like below highlighted code.

    app.module.ts
    1. import { NgModule }      from '@angular/core';  
    2. import { BrowserModule } from '@angular/platform-browser';  
    3.   
    4. import { AppComponent } from './app.component';  
    5. import { StudentListComponent } from './student/student.component'  
    6. import { courseCategoryPipe } from './student/student.coursepipe'  
    7.   
    8. @NgModule({  
    9.     imports: [BrowserModule],  
    10.     declarations: [AppComponent, StudentListComponent, courseCategoryPipe],  
    11.   bootstrap:    [ AppComponent ]  
    12. })  
    13. export class AppModule { }  

  1. In the component.html file, use courseCategoryPipe as highlighted in below code. We need not to pass course property value as parameter. It will be passed automatically.

    student.component.html
    1. <table>  
    2.     <thead>  
    3.         <tr>  
    4.             <th>Index</th>  
    5.             <th>Student ID</th>  
    6.             <th>Name</th>  
    7.             <th>Gender</th>  
    8.             <th>Age</th>  
    9.             <th>Course</th>   
    10.             <th>DOB</th>     
    11.             <th>Grade</th>   
    12.             <th>Rating</th>           
    13.         </tr>  
    14.     </thead>  
    15.     <tbody>  
    16.         <tr *ngFor="let s of students;">  
    17.             <td>{{i}}</td>  
    18.             <td>{{s.studentID}}</td>  
    19.             <td>{{s.studentName | uppercase}}</td>  
    20.             <td>{{s.gender | lowercase}}</td>  
    21.             <td>{{s.age}}</td>  
    22.             <td>{{s.course | courseCategory}}</td> // Custom pipe used here  
    23.             <td>{{s.DOB | date:'yMMMMd' | uppercase }}</td>  
    24.             <td>{{s.grade | percent:'.2'}}</td>  
    25.             <td>{{s.rating | number:'2.1-2'}}</td>  
    26.         </tr>  
    27.     </tbody>  
    28. </table>  
    29. <br />  
    30. <button (click)='getStudents()'>Get More Students</button>  

Now, the Custom course pipe is complete. Let’s run the project to see the expected output.

Output

Angular

Summary

In this article, we covered the following topics –

  • What are pipes in Angular2?
  • Built-in pipes introduced in Angular2.
  • Pipe with parameters
  • Pipe chaining
  • Custom pipes in Angular 2

Write to me in the comment box in case you need any help or you have any questions or concerns. Have a good day!


Similar Articles