Pipes In Angular And How To Create Custom Pipes

Output



Pipes Chaining in Angular 2

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

Output



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.

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.



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'
   3. @Pipe({
   4. name:'courseCategory'
   5. })
   6. export class courseCategoryPipe implements PipeTransform {
   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.
   
   
   

2. 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';
   4. import { AppComponent } from './app.component';
   5. import { StudentListComponent } from './student/student.component'
   6. import { courseCategoryPipe } from './student/student.coursepipe'
   8. @NgModule({
   9. imports: [BrowserModule],
   10. declarations: [AppComponent, StudentListComponent, courseCategoryPipe],
   11. bootstrap: [ AppComponent ]
   12. })
   13. export class AppModule { }

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



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!