Creating Custom Pipe in Angular: A Step-by-Step Tutorial

What is Angular Pipe?

Angular Pipes offer a versatile way to manipulate and present data within Angular applications. They serve as a robust toolkit for developers, enabling them to streamline the process of transforming, filtering, and formatting data before it reaches the user interface.

One key aspect of Angular Pipes is their ability to act as filters, allowing developers to selectively display data based on specified criteria. By leveraging the new filter factory function, developers can create custom filters tailored to their application's unique requirements. Whether it's sorting data in a specific order, filtering items based on certain frequencies, or displaying only the matching items, Angular Pipes provide a flexible solution for data filtration.

In addition to filtering, Angular Pipes also excel at formatting data to meet specified requirements. For instance, developers can utilize the all lowercase format uppercase filter format strings to ensure consistent capitalization across their application's interface. Similarly, the currency filter formats enable developers to present monetary values in the desired currency format, enhancing the user experience.

Furthermore, Angular Pipes facilitate the creation of new array of custom filters, empowering developers to craft bespoke solutions for their applications. Whether it's implementing a custom date filter to format dates in a specific manner or creating a custom lowercase filter to standardize text casing, Angular Pipes offer unparalleled flexibility and customization options.

Built-in Pipes for Filter and Formatting

Angular provides a wide range of built-in pipes to facilitate various data transformations and formatting needs within your application. These pipes, available in the CommonModule, offer powerful functionalities right out of the box.

DatePipe (for changing date format of Date objects)
UpperCasePipe (for uppercase-ing Strings)
LowerCasePipe (for lowercase-ing Strings)
CurrencyPipe (for formatting currencies)
AsyncPipe (for unwrapping asynchronous values, such as Observables!)

Pipes in Angular are just like a function. A function that can take parameters and return us something new String value that’s nicely formatted for the View.

What is the use of pipes?

Here is an overview of what Angular Pipes have to offer:

Format Data

Pipes can convert data into different formats, such as converting data to strings, formatting dates to lower case, or converting numbers to other units.

Reusability

Pipes increase by encapsulating transformation logic. Once defined, pipes can be used across multiple objects and models in the Angular application.

Declarative Syntax

Pipes use a simple syntax and the pipe operator (|) in Angular templates making it easy to implement changes directly in HTML element.

Chaining

Multiple pipes can be linked together to use multiple variables as a link, allowing complex data to be used in the model.

Built-in and Custom Pipes

Angular provides several built-in pipes for common transformations like date formatting, string manipulation, and more. Additionally, developers can create custom pipes to meet specific application requirements.

Why Do We Use Custom Pipe?

Custom pipes play a pivotal role in Angular development, offering a wide array of functionalities such as formatting dates, numbers, and strings, sorting arrays, and filtering data based on specified criteria. They serve as versatile tools for transforming data to adhere to a specified format number filter, whether it's applying uppercase filter format strings or implementing currency filter formats.

For example, the custom filter pipes can be utilized to create date filters, enabling users to format dates according to their preferences. By leveraging AngularJS filters, developers can seamlessly implement custom filters like hepa filters or orderby filters, providing enhanced data manipulation capabilities. Custom pipes also empower developers to transform data at the granular level, whether it's dust filtered arrays or custom filters applied to user input.

How to Create Custom Pipes?

1. Manually Creating Custom Pipe

To manually create a custom pipe in Angular without using the Angular CLI, you'll need to follow these steps:

Step 1

Create a new TypeScript file for your custom pipe in your Angular project. For example, you can create a file named custom.pipe.ts.

Step 2

Inside the TypeScript file, define your custom pipe class.

This class must implement the PipeTransform interface from @angular/core.

Step 3

Add decorator it with the decorator @Pipe and Supply a name property to be used as a template code name. Also, implement the PipeTransform interface.

For example:

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

@Pipe({

  name: 'custom'

})

export class CustomPipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {

    // Your pipe logic here

    return modifiedValue;

  }

}

Step 4

Add Pipe logic into the transform method.

The actual logic for the pipe is put in a function called "transform" on the class.

Here is an example of a pipe that takes input as any string and returns output in string in upper-case.

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

@Pipe({

  name: 'custom'

})

export class CustomPipe implements PipeTransform {

  transform(value: any): any {
   if (typeof value !== 'string') {
      return value;
    }
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

Step 5

Once you've defined your pipe class, you need to register it. You can do this by adding it to the declarations array of a module.

Typically, you would add it to the declarations array of the module where you intend to use the pipe.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CustomPipe } from './custom.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 6

Once your custom pipe is registered, you can use it in your Angular templates by making changes directly in HTML element.

For example:

<p>{{ someValue | custom }}</p>

2. Creating Custom Pipe using ng generate Angular CLI command.

If you want to create your own custom pipe by using Angular CLI then follow the below steps:

Step 1

First, open your command prompt.

Step 2

Navigate to your Angular project directory where you want to create pipe

Step 3

Use the following command to generate a custom pipe

ng generate pipe pipe-name

From the above command, you can replace a pipe name with your own name.

For example:

ng generate pipe capitalize

This command will generate a new pipe file named capitalize.pipe.ts in the src/app directory, along with a corresponding test file.

Your custom pipe will look something like this in capitalize.pipe.ts:

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

@Pipe({

  name: 'capitalize'

})

export class CapitalizePipe implements PipeTransform {

  transform(value: any, ...args: any[]): any {

    if (typeof value !== 'string') {

      return value;

    }

    return value.charAt(0).toUpperCase() + value.slice(1);

  }

}

Step 4

Let's add Pipe transform logic into the transform method. here is an example of a pipe that takes input as milliseconds and returns output in seconds.

How to Use Custom Pipes

You can now use your custom pipe capitalize in your Angular templates by adding it to the declarations array of the module where you want to use it.

For example, if you want to use it in the app.module.ts file, add it like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CapitalizePipe } from './capitalize.pipe'; // Import the pipe

@NgModule({
  declarations: [
    AppComponent,
    CapitalizePipe // Add the pipe to declarations
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once a custom pipe is created and registered, you can use it directly in Angular templates using the pipe operator (|). You can chain multiple pipes together to apply multiple transformations sequentially. Now you can use only the names of capitalize pipe in your templates like this:

<p>{{ 'hello world' | capitalize }}</p>

This will output Hello world.

By following these steps, you can create custom pipes in Angular to encapsulate and reuse transformation logic across your application. Custom pipes are a powerful feature in Angular for data manipulation and formatting in templates.

Final Words

Overall, custom pipes are an essential feature of Angular development, offering developers a convenient and efficient way to transform and manipulate data in their applications. By leveraging custom pipes effectively, developers can create more dynamic, maintainable, and user-friendly Angular applications.