Transforming Data Using Pipes in Angular

In Angular, Pipes are a powerful feature that allows you to transform data directly in your templates. Pipes are like helpers that make it easy to change the way data looks on your webpage without writing a lot of code. Whether you need to format dates, manipulate strings, or perform complex calculations pipes offer a simple way to handle these tasks efficiently.

This article will guide you through the concept of pipes in Angular, explore different approaches to using them, and provide practical examples to help you implement them in your applications.

Prerequisites

• HTML, CSS, and JavaScript
• Angular CLI

Approach

1. Built-in Pipes

Angular comes with several built-in pipes that you can use right out of the box. Here’s how you can use a few of them:

1. DatePipe: Formats a date according to the given format.

<p>{{ today | date:'fullDate' }}</p>

2. UpperCasePipe: Transforms text to uppercase.

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

3. CurrencyPipe: Formats a number as a currency.

<p>{{ amount | currency:'USD':true }}</p>

2. Custom Pipes

Sometimes, built-in pipes aren’t enough. Angular allows you to create your own custom pipes to meet specific requirements.

To create a custom pipe, use the Angular CLI:

ng generate pipe custom

Example of a custom pipe to reverse a string:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'reverse'
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}

Use it in your template:

<p>{{ 'Angular' | reverse }}</p>

3. Chaining Pipes

You can chain multiple pipes to perform complex data transformations:

<p>{{ 'angular pipes' | uppercase | reverse }}</p>

This will first transform the string to uppercase and then reverse it.

Steps To Transforming Data Using Pipes

Now, let's create an Angular application where we implement these pipes.

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, you can install it using the following command:

npm install -g @angular/cli

Step 2: Create a New Angular Project

Generate a new Angular project:

ng new pipes-demo
cd pipes-demo

Step 3: Generate Components and Pipes

Let’s generate the components and custom pipes:

ng generate component example
ng generate pipe reverse

Folder Structure

Dependencies

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

Step 4: Implement Pipes in Components

Implement the built-in and custom pipes in your example.component.html:

<p>Original: {{ 'Angular Pipes' }}</p>
<p>Uppercase: {{ 'Angular Pipes' | uppercase }}</p>
<p>Reversed: {{ 'Angular Pipes' | reverse }}</p>
<p>Chained: {{ 'Angular Pipes' | uppercase | reverse }}</p>

Example: Below is the example demonstrating the transformation of data using Pipes in Angular.

Example Component: HTML and TS code of example component showing pipes such as uppercase, reverse and uppercase reverse and commonmodule and reversepipe in imports array.

<!-- src/app/example/example.component.html -->

<div>
    <h2>Angular Pipes Example</h2>
    <p>Original: {{ 'Angular Pipes' }}</p>
    <p>Uppercase: {{ 'Angular Pipes' | uppercase }}</p>
    <p>Reversed: {{ 'Angular Pipes' | reverse }}</p>
    <p>Chained: {{ 'Angular Pipes' | uppercase | reverse }}</p>
</div>

//src/app/example/example.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';

@Component({
    selector: 'app-example',
    standalone: true,
    imports: [CommonModule, ReversePipe],
    templateUrl: './example.component.html',
    styleUrl: './example.component.css'
})
export class ExampleComponent {

}

App Component: Below is the code example demonstrating app.component.html having selector of example component and example component and router outlet are added as imports in imports array.

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

<app-example></app-example>

//src/app/app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ExampleComponent } from "./example/example.component";

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

Reverse.pipe.ts: Below mentioned is a pipe named as reverse pipe which is a standalone component used for transforming.

//src/app/reverse.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'reverse',
    standalone: true,
})
export class ReversePipe implements PipeTransform {
    transform(value: string): string {
        return value.split('').reverse().join('');
    }
}

To start the Application run the following command.

ng serve --open

Output: