What is a Pipe in Angular?

1. What is a Pipe?

A pipe in Angular is used to transform data before displaying it in the HTML template.

A pipe takes a value as input, transforms it, and returns a formatted value.

Basic syntax

{{ value | pipeName }}

For example:

{{ name | uppercase }}

If:

name = 'syed';

The output will be:

SYED

The original value of name is still "syed". The pipe only changes how the value is displayed.

2. Why Do We Need Pipes?

Applications frequently need to display the same underlying data in different formats.

For example, we may need to:

• Convert text to uppercase or lowercase.
• Format dates.
• Format numbers.
• Display currency.
• Display percentages.
• Transform custom application data.

Without pipes, we might write formatting logic directly in the component:

formattedName = this.name.toUpperCase();

With a pipe:

{{ name | uppercase }}

This keeps presentation-related transformation logic out of the component and makes templates easier to maintain.

3. Common Built-in Angular Pipes

Angular provides several built-in pipes.

4. Full Simple Sample Program

Here is a simple standalone Angular component demonstrating common pipes.

app.ts

import { Component } from '@angular/core';
import {
  UpperCasePipe,
  LowerCasePipe,
  TitleCasePipe,
  DatePipe,
  CurrencyPipe,
  PercentPipe
} from '@angular/common';

@Component({
  selector: 'app-root',

  imports: [
    UpperCasePipe,
    LowerCasePipe,
    TitleCasePipe,
    DatePipe,
    CurrencyPipe,
    PercentPipe
  ],

  templateUrl: './app.html'
})
export class App {

  name = 'syed mohamed';

  today = new Date();

  price = 1500;

  percentage = 0.85;
}

app.html

<h2>Angular Pipe Examples</h2>

<p>
  Original:
  {{ name }}
</p>

<p>
  Uppercase:
  {{ name | uppercase }}
</p>

<p>
  Lowercase:
  {{ name | lowercase }}
</p>

<p>
  Title Case:
  {{ name | titlecase }}
</p>

<p>
  Date:
  {{ today | date:'dd/MM/yyyy' }}
</p>

<p>
  Currency:
  {{ price | currency:'INR' }}
</p>

<p>
  Percentage:
  {{ percentage | percent }}
</p>

Output

Angular Pipe Examples

Original: syed mohamed

Uppercase: SYED MOHAMED

Lowercase: syed mohamed

Title Case: Syed Mohamed

Date: 30/09/2026

Currency: ₹1,500.00

Percentage: 85%

5. How Does It Work?

Consider:

{{ name | uppercase }}

Angular follows this flow:

name
 ↓
"syed mohamed"
 ↓
uppercase pipe
 ↓
"SYED MOHAMED"
 ↓
Displayed in HTML

The important point is that:

name = 'syed mohamed';

does not become:

name = 'SYED MOHAMED';

The pipe transforms the value only for presentation.

6. Pipe Parameters

Some pipes accept additional parameters.

The syntax is:

{{ value | pipeName:parameter1:parameter2 }}

For example:

{{ today | date:'dd/MM/yyyy' }}

Here:

• today → input value
• date → pipe
• 'dd/MM/yyyy' → parameter

Another example:

{{ price | currency:'INR' }}

7. Chaining Pipes

Multiple pipes can be applied to the same value.

{{ name | lowercase | titlecase }}

Flow:

"SYED MOHAMED"
      ↓
 lowercase
      ↓
"syed mohamed"
      ↓
 titlecase
      ↓
"Syed Mohamed"

This is called pipe chaining.

8. Advantages

1. Simple template syntax

Instead of writing formatting code in TypeScript:

this.name.toUpperCase();

we can simply write:

{{ name | uppercase }}

2. Reusable

The same pipe can be used in multiple templates.

3. Separation of concerns

The component manages application data and behavior, while pipes can handle display transformations.

4. Built-in formatting

Angular already provides pipes for common formatting requirements such as:

Date
Currency
Percentage
Numbers
Text

5. Custom pipes

If Angular's built-in pipes don't meet the requirement, we can create our own pipe.

For example:

{{ status | statusText }}

9. Disadvantages

Pipes are useful, but they should not contain heavy business logic.

For example, avoid using a pipe for expensive calculations that repeatedly process very large collections.

Also, pipes are mainly intended for data transformation/presentation, not for:

API calls
Database operations
Complex business logic
Side effects

10. Key Points

• Pipes transform data for display in Angular templates.
• Pipe operator is:

|

• Basic syntax:

{{ value | pipe }}

• Pipes can accept parameters:

{{ value | pipe:parameter }}

• Multiple pipes can be chained:

{{ value | pipe1 | pipe2 }}

• Angular provides several built-in pipes.
• Developers can create custom pipes.
• Pipes generally do not modify the original value.
• In standalone components, the required pipe can be imported directly into the component.

11. Interview Questions and Answers

Q1. What is a pipe in Angular?

A pipe is an Angular feature used to transform data before displaying it in a template.

{{ name | uppercase }}

Q2. Does a pipe modify the original value?

No. Normally, a pipe transforms the value for presentation without changing the original component property.

Q3. What are some built-in Angular pipes?

Common pipes include:

uppercase
lowercase
titlecase
date
currency
percent
number
json

Q4. Can a pipe accept parameters?

Yes.

{{ today | date:'dd/MM/yyyy' }}

'dd/MM/yyyy' is a parameter passed to the date pipe.

Q5. Can we use multiple pipes together?

Yes. This is called pipe chaining.

{{ name | lowercase | titlecase }}

Q6. Can we create our own pipe?

Yes. Angular supports custom pipes using the @Pipe decorator.

Example syntax:

@Pipe({
  name: 'myPipe'
})

Q7. What are pure and impure pipes?

Angular pipes can be classified as:

• Pure pipe — runs when its input value/reference changes; this is the default.
• Impure pipe — can run during change-detection cycles and therefore should be used carefully because of potential performance cost.

@Pipe({
  name: 'myPipe',
  pure: false
})

This distinction is particularly important when discussing custom pipes and performance.