How do you register custom pipes in Angular 17?

Angular provides a powerful feature called pipes, which allows you to transform data before displaying it in your component’s template. While Angular comes with a set of built-in pipes, you can also create your own custom pipes to suit your specific requirements. In this article, we will explore how to register and use custom pipes in an Angular 17 application.

Prerequisites:

• Node >= 18.13.0
• Angular Cli v17

What are Custom pipes?

Custom pipes are user-defined functions that transform input data into a desired output format. They provide a convenient way to encapsulate data transformation logic and reuse it throughout your Angular application. Custom pipes can be used to perform various operations on data, such as formatting strings, filtering arrays, or performing complex calculations.

Features:

• Reusability: Custom pipes can be used across multiple components, which helps in code reusability and maintainability.
• Separation of Concerns: By encapsulating data transformation logic within pipes, you can separate presentation concerns from business logic, making your code more organized and easier to understand.
• Declarative Syntax: Custom pipes can be used directly in component templates using a simple and declarative syntax, making it easier to apply data transformations without cluttering the component’s logic.
• Chainability: Pipes in Angular can be chained together, allowing you to apply multiple transformations in a single expression.

Uses:

• Formatting dates, currency, or numbers
• Transforming text (e.g., uppercase, lowercase, truncation)
• Filtering and sorting arrays or collections
• Implementing custom business rules or calculations
• Applying complex transformations based on multiple inputs or conditions

Steps to Create Custom Pipes

By creating custom pipes, you can enhance the functionality of your Angular application, improve code organization, and provide a consistent and reusable way to handle data transformations across your components. Let us create our own round-number pipe and use it in our application.

Step 1: Create an angular application

We can use the angular cli to create a new application, below are the commands to create the application and move the directory to the application.

ng new custom-pipes
cd custom-pipes

Step 2: Creating a custom pipe

Angular cli provides a command to create pipe file in our application.

ng generate pipe pipe-name 
or
ng g p pipe-name 

By using this command we will create a pipe to transform a round a decimal number.

ng g p round-number

Folder Structure:

The updated dependencies in package.json file.

"dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/platform-server": "^17.2.0",
    "@angular/router": "^17.2.0",
    "@angular/ssr": "^17.2.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  }

Example: This example demonstrates creating custom pipes in Angular 17

HTML

<!--app.component.html-->

<div>
    <p>
        3.4 gets rounded to {{3.4 | roundNumber}}
    </p>
    <hr>
    <p>
        4 gets rounded to {{4 | roundNumber}}
    </p>
    <hr>
    <p>
        1.7640 gets rounded to {{1.7640 | roundNumber}}
    </p>
    <hr>
    <p>
        "1.7640" gets rounded to {{"1.7640" | roundNumber}}
    </p>
</div>

CSS

/*app.component.css*/

div {
    margin: 64px auto;
    padding: 16px;
    border: 1px solid #dedede;
    width: fit-content;
    border-radius: 16px;

    p {
        font-size: 20px;
    }
}

JavaScript

// app.component.ts

import { Component } from '@angular/core';
import { RoundNumberPipe } from './round-number.pipe';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RoundNumberPipe],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss',
})
export class AppComponent {
    title = 'custom-pipes';
}

JavaScript

// round-number.pipe.ts

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

@Pipe({
    name: 'roundNumber',
    standalone: true,
})
export class RoundNumberPipe implements PipeTransform {
    transform(value: number | string): number {
        return Math.round(Number(value));
    }
}

Output:

Output