Parameterized pipes in Angular

Introduction

Parameterized pipes let you change how data looks by giving extra information. This helps show data in different ways without changing the original data.

You want to format a date differently based on user choice.

You need to show a number with a specific number of decimal places.

You want to shorten a long text to a certain length.

You want to add a currency symbol to a number dynamically.

You want to convert text to uppercase or lowercase based on a setting.

Syntax

Angular

{{ value | pipeName:parameter1:parameter2 }}

Parameters come after the pipe name, separated by colons (:).

You can pass multiple parameters to customize the pipe's behavior.

Examples

Formats the birthday date as a full date string like 'Tuesday, June 15, 2021'.

Angular

{{ birthday | date:'fullDate' }}

Shows the price with the Euro currency symbol.

Angular

{{ price | currency:'EUR' }}

Shows only the first 10 characters of text.

Angular

{{ text | slice:0:10 }}

Formats score as a number with at least 1 digit before decimal and 2 digits after.

Angular

{{ score | number:'1.2-2' }}

Sample Program

This Angular component shows how to use parameterized pipes for currency, slicing text, and formatting dates. It displays the original values and their transformed versions using pipes with parameters.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-parameterized-pipe',
  template: `
    <h2>Price Display</h2>
    <p>Original price: {{ price }}</p>
    <p>Price in USD: {{ price | currency:'USD' }}</p>
    <p>Price in GBP: {{ price | currency:'GBP' }}</p>

    <h2>Text Slice</h2>
    <p>Original text: {{ text }}</p>
    <p>First 5 chars: {{ text | slice:0:5 }}</p>

    <h2>Date Format</h2>
    <p>Original date: {{ today }}</p>
    <p>Short date: {{ today | date:'shortDate' }}</p>
    <p>Full date: {{ today | date:'fullDate' }}</p>
  `
})
export class ParameterizedPipeComponent {
  price = 1234.56;
  text = 'Hello Angular Pipes!';
  today = new Date();
}

Important Notes

Angular pipes can take multiple parameters separated by colons.

Parameters can be strings, numbers, or expressions.

Use parameterized pipes to keep templates clean and reusable.

Summary

Parameterized pipes let you customize how data is shown.

Use colons to add parameters after the pipe name.

They help keep your code simple and flexible.