Angular Pipes

What Are Angular Pipes?

Angular Pipes transform data into a required display format inside an HTML template.

They change only how the data is displayed in the UI. They do not modify the original value stored in the component.

Pipe Syntax

A pipe is applied using the pipe symbol (|) in the template.

Some pipes also accept parameters, separated by a colon (:).

Why Are Pipes Used?

Pipes help developers:

• Format text, numbers, dates and currency

• Transform values directly in templates

• Keep templates clean and readable

• Reuse formatting logic across components

• Display asynchronous data automatically

Types of Angular Pipes

Angular Pipes are broadly classified into:

1. Built-in Pipes

Angular provides several ready-to-use pipes for common data transformations.

Text Pipes

Used to transform text values.

• uppercase – Converts text to uppercase

• lowercase – Converts text to lowercase

• titlecase – Converts the first letter of each word to uppercase

Number Pipes

Used to format numeric values.

• number or decimal – Formats decimal numbers

• percent – Converts a number into percentage format

• currency – Formats a number as currency

Date Pipe

The date pipe formats date and time values according to the required pattern and locale.

Slice Pipe

The slice pipe extracts and displays a specific portion of a string or array.

JSON Pipe

The json pipe converts an object into a readable JSON string. It is mainly useful during development and debugging.

KeyValue Pipe

The keyvalue pipe converts an object or map into an array of key-value pairs so that it can be iterated in a template.

Async Pipe

The async pipe works with Observables and Promises.

It automatically:

• Subscribes to an Observable or Promise

• Displays the latest emitted value

• Unsubscribes when the component is destroyed

This helps prevent manual subscription handling and memory leaks.

2. Custom Pipes

A custom pipe is created when the required transformation is not available through Angular’s built-in pipes.

A custom pipe:

• Uses the @Pipe decorator

• Implements the PipeTransform interface

• Contains transformation logic in the transform() method

• Can accept one or more parameters

• Can be reused in multiple templates

Parameterized Pipes

Parameterized pipes allow additional values to control how the output is formatted.

Parameters are passed after the pipe name using the colon (:) symbol. A pipe can accept multiple parameters.

Common parameterized pipes include:

• Date formatting

• Decimal precision

• Currency code and display style

• Percentage formatting

• String or array slicing

Chaining Pipes

Angular allows multiple pipes to be applied to the same value.

The output of one pipe becomes the input of the next pipe. Pipes are executed from left to right.

Pure Pipes

By default, Angular pipes are pure.

A pure pipe executes only when Angular detects:

• A change in a primitive input value

• A change in an object or array reference

• A change in a pipe parameter

Pure pipes provide better performance because Angular does not execute them during every change-detection cycle.

Impure Pipes

An impure pipe can execute during every change-detection cycle.

It can detect internal changes to mutable objects and arrays even when their references remain unchanged.

However, impure pipes should be used carefully because frequent execution can affect application performance.

Pure Pipes vs Impure Pipes

Import Details

In standalone Angular components, built-in pipes can be imported individually in the component’s imports array.

CommonModule can also be imported to make common built-in pipes and directives available.

A custom standalone pipe must also be added to the consuming component’s imports array.

In traditional NgModule-based applications, pipes are made available through the appropriate module imports and declarations.

Important Notes

• Pipes are mainly intended for presentation-layer transformations.

• Pipes should not modify the original input data.

• Heavy calculations should not be performed inside pipes.

• Pure pipes are preferred for better performance.

• The async pipe is recommended when displaying Observable or Promise values.

• Custom pipes are suitable for reusable display-formatting logic.

• Business logic should remain in services or components instead of pipes.

Key Points

• Angular Pipes transform values for display in templates.

• The pipe operator is represented by |.

• Pipes may accept parameters and can be chained.

• Angular provides both built-in and custom pipes.

• Pipes are pure by default.

• Pure pipes execute when an input value or reference changes.

• Impure pipes run frequently and may affect performance.

• Pipes change the displayed output, not the original component data.