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
<!--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>
/*app.component.css*/
div {
margin: 64px auto;
padding: 16px;
border: 1px solid #dedede;
width: fit-content;
border-radius: 16px;
p {
font-size: 20px;
}
}
// 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';
}
// 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:
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