Pipe

In Angular development, separating your business logic from your presentation layer is a core principle. Pipes are the perfect tool for this; they allow you to transform data directly within your templates without changing the underlying value in your component.

Think of a pipe as a small machine in an assembly line: raw data goes in one side, and formatted, user-friendly data comes out the other.

1. The Anatomy of a Pipe

The syntax is straightforward. You use the pipe symbol (|) followed by the pipe name. If the pipe requires extra configuration, you add parameters separated by colons (:).

Syntax: {{ input_data | pipeName : parameter1 : parameter2 }}

Core Built-in Pipes in Angular 21

1. Transformation & Formatting

1. uppercase: Converts text to all capital letters.
2. lowercase: Converts text to all lowercase letters.
3. titlecase: Capitalizes the first letter of each word.
4. date: Formats date values according to locale rules and specific format strings.
5. currency: Formats numbers as local currency strings (USD, EUR, TRY, etc.).
6. number: (DecimalPipe) Formats a value as a decimal number.
7. percent: Multiplies a number by 100 and formats it as a percentage.

2. Collection & Object Management

1. slice: Extracts a subset of an array or a string based on indices.
2. json: Converts an object into a JSON string (primarily for debugging).
3. keyvalue: Transforms an Object or Map into an array of key-value pairs for iteration.

3. Reactive & Internal Orchestration

1. async: Automatically subscribes to an Observable or Promise and returns the latest value.

Note: In Angular 21, while async is still fully supported, developers are increasingly moving towards Signals (using toSignal()) to handle reactive data in templates.

1. i18nPlural: Maps a value to a string based on pluralization categories.
2. i18nSelect: Selects one of several strings based on a matching key.