Angular Custom Pipe

Angular Custom Pipe

In this article, I am going to discuss how to create Angular Custom Pipes with examples. Please read our last article before proceeding to this article where we discussed the built-in pipe and we are also going to work with the same example that we worked in our last article.

Let us understand this with an example.

Our business requirement is that depending on the gender of the student, we need to add Mr. or Miss. prefixed before the name of the student as shown in the below image.

creating Angular Custom Pipes

Let’s see how to achieve this using a custom pipe.

Step1: Let’s create a custom pipe with the name StudentTitlePipe.

To do so, right click on the “Student” folder and add a new TypeScript file with the name “StudentTitle.pipe.ts” and then copy and paste the below code in it. 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'studentTitle'
})
export class StudentTitlePipe implements PipeTransform {
    transform(name: string, gender: string): string {
        if (gender.toLowerCase() == "male")
            return "Mr." + name;
        else
            return "Miss." + name;
    }
}
Let us understand the above code:
  1. First, we import the Pipe decorator and PipeTransform interface from the Angular core.
  2. Then we decorated the “StudentTitlePipe” class with the Pipe decorator so that this class will become an Angular pipe
  3. We then set the name property of the pipe decorator to studentTitle so that we can use this name (studentTitle) on any HTML page where we want this pipe functionality.
  4. The StudentTitlePipe class implements the PipeTransform interface and that interface has one method called transform() and here we implement that method.
  5. As you can see in the above code, the transform method takes 2 parameters (name and gender). The name parameter will receive the name of the student whereas the gender parameter will receive the gender of the student. The method returns a string i.e. Mr. or Miss. prefixed to the name of the student depending on their gender.
Step2: Register the “StudentTitlePipe” in the angular module.

To do so, open the app.module.ts file, then import the StudentTitlePipe and include it in the “declarations” array of NgModule decorator as shown below.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { StudentListComponent } from './Student/StudentList.component';
import { StudentTitlePipe } from './Student/studentTitle.pipe';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, StudentListComponent, StudentTitlePipe],
    bootstrap: [AppComponent]
})
export class AppModule { }
Step3: Use the StudentTitlePipe in StudentList.Component.html page

Modify the StudentList.Component.html file as shown below. Notice that we are passing the student gender as an argument for the gender parameter of our custom pipe. The Student name gets passed automatically.

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>DOB</th>
            <th>Course Fee</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let student of students'>
            <td>{{student.ID | uppercase}}</td>
            <td>{{student.FirstName | studentTitle:student.Gender}}</td>
            <td>{{student.Gender}}</td>      
            <td>{{student.DOB | date:'fullDate' |uppercase}}</td>
            <td>{{student.CourseFee | currency:'USD':true:'1.2-2'}}</td>
        </tr>
        <tr *ngIf="!students || students.length==0">
            <td colspan="10">
                No Students to display
            </td>
        </tr>
    </tbody>
</table>

In the next article, I will discuss Angular 2 Container and Nested Components with examples.

SUMMARY:

In this article, I try to explain how to create Angular Custom Pipes with examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

No HTML was returned.

Leave a Reply

Your email address will not be published. Required fields are marked *