Templates & Logic›Core· 30 min read

Formatting Data with Pipes

A pipe transforms a value for display — dates, currency, uppercase and more — without changing your data.

What you will learn

Use built-in pipes with the | symbol
Pass options to a pipe
Chain more than one pipe together

Transform on the way to the screen

A pipe takes a value and formats it for display. You apply one with the | symbol inside interpolation. Your underlying data stays the same — only what the user sees changes.

Values we want to format nicely

// component class
name = 'asha sharma';
price = 1999.5;
today = new Date(2026, 5, 7);   // 7 June 2026

Note: Output: (No visible output by itself.) These are the raw values — a lowercase name, a plain number, and a Date object. The template below sends each one through a pipe to display it nicely.

Three common built-in pipes

<p>{{ name | uppercase }}</p>
<p>{{ today | date }}</p>
<p>{{ price | currency }}</p>

Note: Output: ASHA SHARMA Jun 7, 2026 $1,999.50 The uppercase pipe shouts the name, date formats the date, and currency adds the symbol and decimals. The variables themselves are untouched.

Pass options to a pipe

Many pipes accept settings after a colon. For example, change the currency code or the date format.

Pipes with arguments after a colon

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

Note: Output: ₹1,999.50 Sunday, June 7, 2026 The currency pipe now uses Indian rupees, and the date pipe uses the long “fullDate” format. Same data, different display.

Chain pipes together

You can stack pipes — the output of one flows into the next, left to right.

titlecase, and a chained slice + uppercase

<p>{{ name | titlecase }}</p>
<p>{{ name | slice:0:4 | uppercase }}</p>

Note: Output: Asha Sharma ASHA The second line first slices the first 4 characters (“asha”), then uppercases them to “ASHA”.

Pipe	Turns this	Into this
`uppercase`	asha	ASHA
`titlecase`	asha sharma	Asha Sharma
`date`	a Date object	Jun 7, 2026
`currency`	1999.5	$1,999.50
`number`	3.14159	3.142 (with options)

Tip: Pipes are for display only — they never change the value in your class. To actually change stored data, do it in the class with code.

Q. What does {{ "hello" | uppercase }} display?

Answer: The uppercase pipe transforms the value for display, so “hello” is shown as “HELLO”.

✍️ Practice

Show a price with the currency pipe using your local currency code.
Display today’s date with two different date formats.

🏠 Homework

Make a product line that shows a title-cased name and a formatted price using pipes.