Pipes in Angular

⭐ What Are Pipes in Angular?

A Pipe in Angular is a tool used in templates to transform or format data before displaying it to the user.

You apply a pipe using the pipe symbol |.

Example:

Pipes help format:

  • Text

  • Dates

  • Numbers

  • Currency

  • JSON

  • Custom transformations

🎯 Why Use Pipes?

✔ For clean UI formatting
✔ To avoid writing logic inside the component
✔ To transform data directly inside templates
✔ To reuse formatting across the app

⭐ Built-in Angular Pipes

Here are the most common ones:

PipeExampleOutput
uppercase`{{ ‘hello’uppercase }}`
lowercase`{{ ‘HELLO’lowercase }}`
titlecase`{{ ‘hello world’titlecase }}`
date`{{ todaydate:’short’ }}`
currency`{{ 500currency:’INR’ }}`
percent`{{ 0.25percent }}`
jsonShows object as JSON
slice`{{ arrslice:1:3 }}`

🧩 Example: Date Formatting

TS


HTML


Output example:
👉 Friday, December 12, 2025

🧩 Example: Currency Pipe


Output:
👉 ₹4,999.00

⭐ Using Multiple Pipes (Pipe Chaining)

You can apply more than one pipe:


Steps:

  1. Convert to UPPERCASE → “HELLO WORLD”

  2. Slice → “HELLO”

⭐ Pipes with Parameters

Some pipes accept arguments:


'1.2-2' → one digit before decimal, 2 minimum fraction digits, 2 max.

⭐ Pipes with Async Data (Async Pipe)

For Observables or Promises:

TS


HTML


Output:
👉 Sanjit

Async pipe:

  • Subscribes automatically

  • Unsubscribes when component is destroyed

⭐ JSON Pipe for Debugging




 

Helpful for displaying object data during development.

⭐ Custom Pipes

You can create your own pipe:

Create Pipe


Pipe Code


Use in Template


🔍 Rules of Pipes in Templates

✔ Pipes are pure by default → fast
✔ Called only when input changes
✔ Cannot modify original data
✔ They only transform values shown in the template

🎉 One-Line Summary

👉 Pipes (|) let you transform data in Angular templates—formatting text, numbers, dates, or custom logic easily.

You may also like...