Angular FAQ: Top Questions

14. What is a Pipe in Angular?

In Angular, a pipe is a simple way to transform displayed data within templates. Pipes take in raw data and format it in a human-readable or customized way without altering the underlying model. They are often used in interpolation expressions and template bindings.

Angular provides a number of built-in pipes for common transformations, such as formatting dates, numbers, text cases, currencies, and JSON. You can also create your own custom pipes for advanced or domain-specific data transformations.

Built-in Pipes:
- date – Formats date objects into readable strings (e.g., 'short', 'longDate')
- uppercase / lowercase – Transforms text case
- currency – Formats numbers as currency
- percent – Formats numbers as percentages
- json – Converts objects to JSON string representation
Chaining Pipes:
- You can apply multiple pipes by chaining them with the | operator.
- Example: {{ amount | currency:'USD' | uppercase }}
Custom Pipes:
- Create custom pipes using the @Pipe decorator and implementing the PipeTransform interface.
- Useful for domain-specific formatting or transformations not covered by built-ins.


// app.component.ts

export class AppComponent {
  today: Date = new Date();
}


// app.component.html

<p>Today is {{ today | date:'longDate' }}</p>

Explanation of the Example Code:

The today property is initialized with the current date.
The date pipe formats the date to a readable string using the 'longDate' format (e.g., "June 26, 2025").
Pipes are applied in the view only, so the original data (in the component class) remains unchanged.

Pipes help keep templates clean and expressive by handling formatting logic in a declarative way. This promotes reusability and separation of concerns in your Angular application.

←→