Parameterized Pipes in Angular

Angular provides a robust system of pipes that help you transform and format data directly in your templates. They allow developers to apply transformations to displayed values without modifying the underlying data.

Among these, parameterized pipes are especially powerful because they allow developers to customize how data is formatted or displayed by passing arguments (parameters) directly into the pipe.

This comprehensive post will explore everything about parameterized pipes — what they are, how to use them, examples of built-in parameterized pipes, custom pipe creation, real-world use cases, and best practices for efficient Angular development.

Introduction to Pipes in Angular

In Angular, a pipe is a way to transform data in your HTML templates. Instead of writing extra logic inside your components or TypeScript files, pipes allow transformations inline using the pipe operator ( | ).

For example, if you want to convert text to uppercase:

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

Output:

HELLO WORLD

This transformation happens directly in the template. Pipes make templates cleaner, reduce boilerplate code, and improve readability.

---

What Are Parameterized Pipes?

A parameterized pipe is a pipe that accepts one or more arguments (parameters) to customize its output. Instead of providing the same result for all inputs, it adjusts its behavior based on the parameters you pass.

The syntax for using a parameterized pipe is:

{{ value | pipeName:parameter1:parameter2:parameter3 }}

Each parameter is separated by a colon (:).

For example, Angular’s DecimalPipe, DatePipe, CurrencyPipe, and PercentPipe are all parameterized pipes because they accept formatting options as parameters.

---

Example of a Parameterized Pipe — DecimalPipe

Angular’s DecimalPipe formats numbers according to specified digit patterns.

Example

<p>{{ 3.14159 | number:'1.2-3' }}</p>

Output:

3.142

Here, '1.2-3' is the parameter passed to the pipe, and it defines the formatting rule.

---

Understanding DecimalPipe Parameters

The DecimalPipe parameter string '1.2-3' consists of three parts:

minIntegerDigits.minFractionDigits-maxFractionDigits

Let’s break it down:

• minIntegerDigits (1): Minimum number of digits before the decimal point.
• minFractionDigits (2): Minimum number of digits after the decimal point.
• maxFractionDigits (3): Maximum number of digits after the decimal point.

So, '1.2-3' means:

• Always show at least 1 digit before the decimal.
• Show at least 2 digits and at most 3 digits after the decimal.

---

More Examples with DecimalPipe

Example 1:

<p>{{ 2.5 | number:'1.2-2' }}</p>

Output:

2.50

Example 2:

<p>{{ 2.34567 | number:'1.2-4' }}</p>

Output:

2.3457

Example 3:

<p>{{ 1234.5 | number:'4.2-2' }}</p>

Output:

1,234.50

These examples show how parameterized pipes provide powerful control over how data is displayed.

---

Why Use Parameterized Pipes?

Parameterized pipes eliminate the need to write repetitive formatting logic in components.

Without pipes, you would need to use JavaScript or TypeScript functions to format data. For example:

this.formattedNumber = this.rawNumber.toFixed(2);

Then display it:

<p>{{ formattedNumber }}</p>

Using parameterized pipes, you can do this directly in the template:

<p>{{ rawNumber | number:'1.2-2' }}</p>

This keeps the business logic in the component minimal and the formatting logic in the template where it belongs.

---

Built-in Parameterized Pipes in Angular

Angular provides several parameterized pipes out of the box. Let’s explore them one by one.

---

1. DecimalPipe

Formats numbers into a localized decimal representation.

Syntax:

{{ value | number:digitsInfo:locale }}

Example:

<p>{{ 1234.567 | number:'1.2-2' }}</p>

Output:

1,234.57

---

2. CurrencyPipe

Formats numbers into localized currency strings.

Syntax:

{{ value | currency:currencyCode:display:digitsInfo:locale }}

Example:

<p>{{ 2500 | currency:'USD':'symbol':'1.2-2' }}</p>

Output:

$2,500.00

Parameters allow customization of:

• Currency code (USD, EUR, PKR)
• Display style (symbol or code)
• Number format (1.2-2)

---

3. PercentPipe

Displays numbers as percentages.

Syntax:

{{ value | percent:digitsInfo:locale }}

Example:

<p>{{ 0.1234 | percent:'1.2-2' }}</p>

Output:

12.34%

The parameters work similarly to DecimalPipe, controlling how many digits to display.

---

4. DatePipe

Formats dates according to a given pattern.

Syntax:

{{ dateValue | date:format:timezone:locale }}

Example:

<p>{{ today | date:'dd/MM/yyyy' }}</p>

Output:

09/10/2025

The format parameter allows extensive customization:

• 'short' → 10/9/25, 10:00 AM
• 'medium' → Oct 9, 2025, 10:00:00 AM
• 'longDate' → October 9, 2025
• Custom formats like 'EEEE, MMMM d, y'

---

5. SlicePipe

Extracts a section of an array or string.

Syntax:

{{ value | slice:start:end }}

Example:

<p>{{ 'ANGULAR' | slice:0:3 }}</p>

Output:

ANG

You can also use it with arrays:

<p>{{ [1,2,3,4,5] | slice:1:4 }}</p>

Output:

[2,3,4]

---

6. AsyncPipe

Although not parameterized in the traditional sense, it supports arguments when dealing with observables or promises.

Syntax:

{{ observable$ | async }}

The AsyncPipe subscribes to the observable and automatically unsubscribes when the component is destroyed.

---

How Parameterized Pipes Work Internally

Pipes are classes that implement the PipeTransform interface. When you pass parameters, Angular internally calls the transform() method and provides all arguments.

Example Implementation Conceptually:

transform(value: any, ...args: any[]): any {
  // args contain parameters passed in template
}

For example, when you use:

{{ 3.14159 | number:'1.2-3' }}

Angular internally calls:

transform(3.14159, '1.2-3');

This means each parameter in the pipe expression corresponds to an argument in the transform method.

---

Creating a Custom Parameterized Pipe

You can also create your own custom parameterized pipes to format or transform data your way.

Example: Custom Truncate Pipe

This pipe shortens text and optionally adds ellipsis.

Step 1: Create Pipe

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

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20, trail: string = '...'): string {
return value.length > limit ? value.substring(0, limit) + trail : value;
  }
}

Step 2: Use in Template

<p>{{ 'Angular is a great framework for building modern web apps' | truncate:25 }}</p>

Output:

Angular is a great frame...

Here:

• The first parameter defines the character limit.
• The second parameter defines the trailing text (default is ...).

---

Passing Multiple Parameters

You can pass multiple parameters to a pipe by separating them with colons.

Example:

{{ value | pipeName:param1:param2:param3 }}

Angular will pass all these parameters to the pipe’s transform() method.

Example with TruncatePipe:

<p>{{ description | truncate:10:'---' }}</p>

Output:

Angular fr---

---

Example: Custom Temperature Conversion Pipe

Let’s create another example to demonstrate multiple parameters.

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

@Pipe({
  name: 'temperature'
})
export class TemperaturePipe implements PipeTransform {
  transform(value: number, unit: string = 'C'): string {
if (unit === 'F') {
  const fahrenheit = value * 9 / 5 + 32;
  return ${fahrenheit.toFixed(2)} °F;
} else {
  return ${value.toFixed(2)} °C;
}
  }
}

Use in Template:

<p>{{ 25 | temperature:'C' }}</p>
<p>{{ 25 | temperature:'F' }}</p>

Output:

25.00 °C
77.00 °F

This pipe demonstrates how parameterized arguments allow flexible transformations.

---

Chaining Parameterized Pipes

You can chain multiple pipes together, including parameterized ones.

Example:

<p>{{ 3.14159 | number:'1.2-2' | uppercase }}</p>

Angular first applies the number pipe and then passes the output to the uppercase pipe.

Example 2:

<p>{{ date | date:'medium' | uppercase }}</p>

This displays a formatted date in uppercase.

---

Real-World Examples of Parameterized Pipes

Example 1: Formatting Currency Dynamically

<p>{{ price | currency:selectedCurrency:'symbol':'1.2-2' }}</p>

export class ProductComponent {
  price = 99.99;
  selectedCurrency = 'EUR';
}

---

Example 2: Date Formatting for Different Locales

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

Displays the same date in French and English styles.

---

Example 3: Array Pagination with SlicePipe

<ul>
  <li *ngFor="let item of items | slice:start:end">{{ item }}</li>
</ul>

This helps with pagination in templates without needing extra logic.

---

Handling Edge Cases

1. Undefined or Null Values

If the input to a pipe is null, the pipe returns null. To handle such cases:

<p>{{ price ? (price | currency:'USD') : 'Not available' }}</p>

2. Dynamic Parameter Changes

If parameters are bound to component properties, the pipe will re-evaluate automatically when those properties change.

<p>{{ number | number:digits }}</p>

digits = '1.0-0';

Updating digits in TypeScript will update the pipe output dynamically.

---

Custom Parameterized Pipe with Conditional Logic

You can use multiple parameters to make your pipes context-aware.

Example: StatusPipe

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

@Pipe({
  name: 'status'
})
export class StatusPipe implements PipeTransform {
  transform(value: number, activeText: string = 'Active', inactiveText: string = 'Inactive'): string {
return value === 1 ? activeText : inactiveText;
  }
}

Usage:

<p>{{ user.status | status:'Online':'Offline' }}</p>

If user.status is 1, it displays Online; otherwise, Offline.

---

Using Parameterized Pipes in Reactive Templates

Parameterized pipes work seamlessly with Angular’s reactive forms or observable data sources.

Example:

<p>{{ price$ | async | currency:'USD':'symbol':'1.2-2' }}</p>

If price$ emits 123.45, it displays $123.45.

You can even make it dynamic by binding parameters to reactive form values.

---

Performance Considerations

• Pure vs Impure Pipes:
  Angular re-evaluates pure pipes only when input values or parameters change. All built-in parameterized pipes are pure, ensuring optimal performance.
• Avoid Complex Logic in Pipes:
  Pipes should remain lightweight. Heavy computations inside transform() may slow down template rendering.
• Custom Pipes and Change Detection:
  If your pipe depends on mutable data (like arrays that are modified), consider marking it as impure, but use it carefully since it will execute on every change detection cycle.

---

Testing Parameterized Pipes

Example Test for DecimalPipe

import { DecimalPipe } from '@angular/common';

describe('DecimalPipe', () => {
  it('should format number correctly', () => {
const pipe = new DecimalPipe('en-US');
expect(pipe.transform(3.14159, '1.2-3')).toBe('3.142');
  });
});

Example Test for Custom Pipe

import { TruncatePipe } from './truncate.pipe';

describe('TruncatePipe', () => {
  it('should truncate string', () => {
const pipe = new TruncatePipe();
expect(pipe.transform('Angular', 3)).toBe('Ang...');
  });
});

Unit testing ensures your pipes behave consistently across different data inputs and parameters.

---

Common Mistakes with Parameterized Pipes

1. Incorrect Parameter Order
   • Always follow the pipe’s documented parameter order.
   • For example: currencyCode comes before display in CurrencyPipe.
2. String vs Number Parameters
   • Angular treats all parameters as strings. Convert them manually inside custom pipes if you need numeric operations.
3. Overusing Pipes for Complex Logic
   • Pipes should handle formatting, not business logic.
4. Forgetting to Declare Custom Pipes
   • Always declare custom pipes in your module’s declarations array or as a standalone component pipe.

---

Best Practices for Using Parameterized Pipes

• Use built-in parameterized pipes whenever possible.
• Keep pipe logic simple and pure.
• Avoid chaining too many pipes in a single expression.
• Prefer pipes for display transformations, not data manipulation.
• Use custom pipes for repetitive template logic that involves formatting or transformation.
• Localize currency and date pipes using Angular’s locale support for global applications.

---

Summary

• Parameterized Pipes in Angular allow you to pass arguments to pipes for customized output.
• Built-in parameterized pipes include DecimalPipe, CurrencyPipe, DatePipe, PercentPipe, and SlicePipe.
• Syntax for parameters: {{ value | pipeName:parameter1:parameter2 }}
• Parameters control number of digits, formatting styles, currency codes, locales, and much more.
• You can also build custom parameterized pipes to handle unique formatting needs in your application.
• Pipes improve readability, reusability, and keep templates clean by moving formatting logic away from components.