We often need to display data in a way that's clear and visually appealing. This might include formatting names, dates, prices, percentages, or list items.

If you try to handle all these transformations manually inside the component logic, our templates can quickly become cluttered and messy. To solve this, Angular provides a clean and simple feature called pipes — a way to transform data directly in the template.

What Are Pipes?

Think of a pipe as a tool that takes in raw data, processes it, and outputs a modified version — kind of like a filter in a data stream.

Using Pipes in Angular

Whenever you need to format data right inside the template, you can apply a pipe using the | (pipe) symbol:

python

You can even chain multiple pipes together:

python

Some pipes also accept parameters, which you pass using colons (:):

python

Angular comes with a set of built-in pipes to handle common formatting needs — from numbers and dates to currency and case transformations. Let's walk through real-world examples, starting with the basics and moving to more advanced use cases.

String Transformation

Let's say you have a property username in your component. It's often useful to highlight or emphasize a user's name by displaying it in all uppercase letters.

Here, the userName property is pulled from the component and transformed to uppercase using Angular's built-in uppercase pipe. So if userName = 'alex', the output on the page will be: ALEX.

Formatting Dates

Aside from strings, one of the most common data types you'll need to format is a date.

Imagine you have a user object. You want to show the date they joined in a clean, readable format:

If user.dateJoined = new Date(2023, 3, 15), the result would be: Joined on: April 15, 2023.

The date pipe supports a wide range of formats, such as short, medium, fullDate, or even custom formats like dd/MM/yyyy.

Displaying Currency

Once you've got dates down, let's say you're building an online store.

You're working with a product object. To show the price in a specific currency, use the currency pipe:

If product.price = 199.99, the output will be: Price: $199.99.

You can customize the currency pipe with locale settings, display style, and whether or not to show the currency symbol.

There are many other useful pipes available in Angular. While we won't cover them all here, below is a quick reference list of pipes not yet mentioned:

To learn more about each pipe, visit the official Angular documentation.