Angular - Creating Custom Pipe(|)

In my previous article, I have discussed inbuilt pipes provided by Angular to transform the data.

• Angular - Pipes

But sometimes, to fulfill our requirement, we need to create our own pipe, i.e., a custom pipe. So, in this article, I am going to talk about:

• How to create a custom pipe in Angular

As we already know that Pipes (|) in Angular are used to transform the data before displaying in a browser, so in this article, my requirement is to filter the student's record based on the value, i.e., name of the student entered in the search textbox given at the top.

See the below screen.

Once the user enters anything in the textbox, the student record will get filtered based on the name of the student. Please note that I have used bootstrap classes to apply the basic styles.

To build the above screen, I have used only one component (AppComponent) and Respective HTML template file. To create the custom pipe, I have created one TypeScript file and implemented PipeTransforms interface and implemented the custom logic inside the transform method.

Step 1 - Create the custom pipe

To create custom pipe, create one .ts file and paste the below code.

import { Pipe } from "@angular/core";
import { PipeTransform } from "@angular/core";

@Pipe({
    name: 'namefilterpipe' //name of the pipe

})
// This custom pipe implements the PipeTransform interface
// as you can see in below code I have provided the custom implementation to the transform method to filter the record
//based on the character typed in the search textbox
export class NamePipe implements PipeTransform {
    transform(studentList: any, searchText: any) {
        if (searchText)
            return studentList.filter(x => x.Name.toLowerCase().startsWith(searchText.toLowerCase());

        return studentList;
    }

}

As you can see in the above code, I have implemented Pipetransform interface and provided the body to transform method and in the decorator, i.e, @Pipe, I have given the name of the pipe as namefilterpipe. The transform method takes two arguments as we are applying a filter on the student list. The first argument will be the student list and the second argument will be our textbox value which a user will type. And based on the input values, I am filtering the student’s record and returning it.

After creating the file, declare that pipe inside the declaration section of the AppModule.

Step 2

Open the app.commponent.ts file and paste the following code.

import { Component } from '@angular/core'
@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
})

export class AppComponent {

    public students: any;// this variable holds the list of students
    public searchText: any;

    constructor() {
        this.students = [
            { Id: 1, Name: "Mahesh", Address: "Thane", Gender: "Male" },
            { Id: 2, Name: "Nishikant", Address: "Chembur", Gender: "Male" },
            { Id: 3, Name: "Sameer", Address: "Mulund", Gender: "Male" },
            { Id: 4, Name: "Nitin", Address: "Nahur", Gender: "Male" },
            { Id: 4, Name: "Siri", Address: "Worli", Gender: "Female" }
        ];
    }
}

As you can see, in the above code, I have just created one student's array and I am initializing this array inside constructor.

Step  3

Now, open the app.component.html and paste the following code.

<div class="container">
        <b>Enter Name :</b> <input type="text" [(ngModel)]="searchText"><br/>
        <table class="table table-sm">
            <thead>
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Name</th>
                    <th scope="col">Address</th>
                    <th scope="col">Gender</th>
                </tr>
            </thead>
            <tbody>
                <!--using *ngFor directive to iterate over student list-->
                <tr *ngFor="let student of students | namefilterpipe : searchText">
                    <th scope="row">{{student.Id}}</th>
                    <td>{{student.Name }}</td>
                    <td>{{student.Address}}</td>
                    <td>{{student.Gender}}</td>
                </tr>
            </tbody>
        </table>
    </div>

Here,  I am displaying the students in the table using *ngFor structural directive and at the same time, I have applied the custom filter; i.e namefilterpipe, and passing the entered value as a parameter.

See the following code snippet.

<tr *ngFor="let student of students | namefilterpipe : searchText">

Run the code and see the below output screen.

In this way, we can create and use custom pipes. I hope this will help you someday. 

Thanks!

You can download the complete code from my GitHub repository.