Backend interview prep

Start

Angular Pipes

Learn Angular Pipes in detail including built-in pipes, custom pipes, pure vs impure pipes, Async Pipe, chaining, parameterized pipes, standalone pipes, performance optimization, architecture diagrams, and interview questions.

Angular Pipes transform data before displaying it in the UI without modifying the original data.

Instead of writing formatting logic inside components, Angular encourages developers to move presentation-related transformations into pipes.

Pipes improve:

  • Readability
  • Reusability
  • Maintainability
  • Separation of Concerns

Angular provides several built-in pipes and also allows developers to create custom pipes.

Pipes are among the most commonly asked Angular interview topics, especially for enterprise applications.

Table of Contents

  • What are Pipes?
  • Why Use Pipes?
  • How Pipes Work
  • Built-in Pipes
  • Custom Pipes
  • Parameterized Pipes
  • Chaining Pipes
  • Pure vs Impure Pipes
  • Async Pipe
  • Standalone Pipes
  • Performance Best Practices
  • Real-World Examples
  • Top 10 Interview Questions
  • Summary

What are Pipes?

A Pipe transforms data for presentation.

Component Data

↓

Pipe

↓

Formatted Data

↓

Template

The original component value remains unchanged.

Pipe Architecture

flowchart LR

Component

Component --> Pipe

Pipe --> FormattedData

FormattedData --> Template

Template --> Browser

Pipe Syntax

Angular uses the pipe (|) operator.

{{ value | pipeName }}

Example

{{ username | uppercase }}

Output

VENU

Why Use Pipes?

Without Pipes

  • Formatting logic inside components
  • Duplicate formatting code
  • Harder maintenance

With Pipes

  • Cleaner templates
  • Reusable transformations
  • Better separation of concerns

Data Transformation Flow

sequenceDiagram

participant Component

participant Pipe

participant Template

participant Browser

Component->>Pipe: Raw Data

Pipe->>Template: Formatted Data

Template-->>Browser: Display

Built-in Angular Pipes

Angular provides many built-in pipes.

Pipe Purpose
uppercase Uppercase text
lowercase Lowercase text
titlecase Title Case
date Format dates
currency Format currency
percent Format percentages
decimal (number) Format numbers
json Display JSON
slice Extract part of an array/string
async Subscribe to Observables/Promises
keyvalue Iterate object properties
i18nPlural Pluralization
i18nSelect Select localized values

UpperCase Pipe

Component

name = "venu";

Template

{{ name | uppercase }}

Output

VENU

LowerCase Pipe

{{ name | lowercase }}

Output

venu

TitleCase Pipe

{{ title | titlecase }}

Input

angular interview guide

Output

Angular Interview Guide

Date Pipe

Component

today = new Date();

Template

{{ today | date }}

{{ today | date:'short' }}

{{ today | date:'medium' }}

{{ today | date:'fullDate' }}

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

Example Output

Jul 28, 2026

7/28/26, 10:30 AM

Jul 28, 2026, 10:30:00 AM

Tuesday, July 28, 2026

2026-07-28

Currency Pipe

salary = 125000;

{{ salary | currency }}

{{ salary | currency:'USD' }}

{{ salary | currency:'EUR' }}

{{ salary | currency:'INR' }}

Example Output

$125,000.00

$125,000.00

€125,000.00

₹125,000.00

Percent Pipe

completion = 0.92;

{{ completion | percent }}

Output

92%

Number Pipe

price = 12345.6789;

{{ price | number }}

{{ price | number:'1.2-2' }}

Output

12,345.679

12,345.68

JSON Pipe

Useful for debugging.

<pre>

{{ user | json }}

</pre>

Slice Pipe

String

{{ name | slice:0:4 }}

Output

Venu

Array

{{ users | slice:0:3 | json }}

KeyValue Pipe

Component

employee = {
  id: 101,
  name: 'Venu',
  role: 'Lead'
};

Template

<div *ngFor="let item of employee | keyvalue">
  {{ item.key }} : {{ item.value }}
</div>

Pipe Transformation Architecture

flowchart TD

Component

Component --> DatePipe

Component --> CurrencyPipe

Component --> UpperCasePipe

DatePipe --> UI

CurrencyPipe --> UI

UpperCasePipe --> UI

Chaining Pipes

Multiple pipes can be chained.

{{ username | uppercase | slice:0:5 }}

Execution

username

↓

uppercase

↓

slice

↓

Result

Pipe Chaining Flow

flowchart LR

Value

Value --> UpperCase

UpperCase --> Slice

Slice --> Browser

Parameterized Pipes

Many pipes accept parameters.

{{ salary | currency:'USD':'symbol':'1.2-2' }}

General Syntax

{{ value | pipe:param1:param2 }}

What is Async Pipe?

The Async Pipe automatically subscribes to an Observable or Promise and unsubscribes when the component is destroyed.

Component

users$ = this.userService.getUsers();

Template

<div *ngIf="users$ | async as users">

{{ users.length }}

</div>

Benefits

  • Automatic subscription
  • Automatic cleanup
  • Less boilerplate
  • Reduces memory leak risk

Async Pipe Flow

sequenceDiagram

participant Observable

participant AsyncPipe

participant Template

Observable->>AsyncPipe: New Value

AsyncPipe->>Template: Update UI

Template-->>Browser: Render

Creating a Custom Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse',
  standalone: true
})
export class ReversePipe implements PipeTransform {

  transform(value: string): string {

    return value.split('').reverse().join('');

  }

}

Usage

{{ name | reverse }}

Custom Pipe Architecture

flowchart LR

Component

Component --> CustomPipe

CustomPipe --> Template

Template --> Browser

Pure Pipes

Default behavior.

@Pipe({

name:'salary'

})

Characteristics

  • Executes only when input reference changes
  • Better performance
  • Recommended for most use cases

Impure Pipes

@Pipe({

name:'salary',

pure:false

})

Characteristics

  • Executes during every change detection cycle
  • Useful when data is mutated instead of replaced
  • Can negatively affect performance if overused

Pure vs Impure Pipes

flowchart TD

ChangeDetection

ChangeDetection --> PurePipe

ChangeDetection --> ImpurePipe

PurePipe --> ReferenceChanged

ReferenceChanged --> Render

ImpurePipe --> EveryCycle

EveryCycle --> Render

Standalone Pipes

Angular supports standalone pipes.

@Pipe({

name:'currencyFormat',

standalone:true

})
export class CurrencyFormatPipe{}

Use directly in standalone components.

Real-World Banking Example

flowchart TD

BankAPI

BankAPI --> AccountComponent

AccountComponent --> CurrencyPipe

AccountComponent --> DatePipe

AccountComponent --> PercentPipe

CurrencyPipe --> Dashboard

DatePipe --> Dashboard

PercentPipe --> Dashboard

Example

Balance:
{{ account.balance | currency:'USD' }}

Opened:
{{ account.openDate | date:'mediumDate' }}

Interest:
{{ account.interestRate | percent }}

Performance Best Practices

Practice Benefit
Use Pure Pipes Better performance
Use Async Pipe Automatic subscription management
Keep Pipes Stateless Easier maintenance
Avoid Heavy Computation Faster rendering
Use Standalone Pipes Simpler architecture

Common Mistakes

Heavy Logic Inside Pipes

❌ Avoid

transform(){

// Database calls

}

Pipes should remain fast and focused on presentation.

Using Impure Pipes Unnecessarily

Impure pipes execute during every change detection cycle and can reduce performance.

Manual Subscription

❌

this.observable.subscribe(...)

when the value is only needed in the template.

Prefer

{{ data$ | async | json }}

Modifying Original Data

Pipes should return transformed values and avoid mutating the original input.

Advantages

Feature Benefit
Reusable Write once, use everywhere
Readable Cleaner templates
Declarative Easy formatting
Async Pipe Automatic subscription handling
Pure Pipes Better performance
Standalone Easy reuse

Top 10 Angular Pipes Interview Questions

1. What are Angular Pipes?

Answer

Angular Pipes transform data before displaying it in the UI without modifying the original value.

2. What is the syntax of a Pipe?

Answer

{{ value | pipeName }}

3. Name some built-in Angular Pipes.

Answer

  • uppercase
  • lowercase
  • titlecase
  • date
  • currency
  • percent
  • number
  • json
  • slice
  • async
  • keyvalue

4. What is the Async Pipe?

Answer

The Async Pipe automatically subscribes to Observables or Promises, updates the UI when new values arrive, and unsubscribes automatically when the component is destroyed.

5. What is the difference between Pure and Impure Pipes?

Pure Pipe Impure Pipe
Runs when input reference changes Runs every change detection cycle
Better performance More expensive
Default behavior pure:false

6. Can multiple pipes be chained?

Answer

Yes.

Example:

{{ username | uppercase | slice:0:4 }}

7. How do you create a custom Pipe?

Answer

Create a class that implements PipeTransform and decorate it with @Pipe.

8. What are Standalone Pipes?

Answer

Standalone Pipes can be imported directly into standalone components without declaring them in an NgModule.

9. Why should Async Pipe be preferred over manual subscriptions in templates?

Answer

It automatically manages subscriptions, reduces boilerplate, and helps prevent memory leaks.

10. What are the best practices for Angular Pipes?

Answer

  • Prefer Pure Pipes.
  • Use Async Pipe for template subscriptions.
  • Keep pipes stateless.
  • Avoid heavy computations.
  • Create custom pipes for reusable formatting.
  • Use standalone pipes in modern Angular applications.

Interview Cheat Sheet

Topic Remember
Syntax {{ value | pipe }}
Uppercase uppercase
Date date
Currency currency
Percent percent
Number number
JSON json
Observable async
Default Pipe Type Pure
Custom Pipe PipeTransform

Summary

Angular Pipes provide a clean, declarative way to transform data for presentation without changing the underlying model. Built-in pipes such as date, currency, number, percent, and async cover common formatting needs, while custom pipes allow teams to encapsulate reusable transformation logic. Using Pure Pipes, the Async Pipe, and Standalone Pipes helps create scalable, maintainable, and high-performance Angular applications.

Key Takeaways

  • ✔ Pipes transform data for display.
  • ✔ Use the | operator in templates.
  • ✔ Angular includes many built-in pipes.
  • ✔ Create reusable transformations with custom pipes.
  • ✔ Prefer Pure Pipes for better performance.
  • ✔ Use Async Pipe for Observables and Promises.
  • ✔ Standalone Pipes simplify Angular applications.
  • ✔ Avoid heavy processing inside pipes.
  • ✔ Pipes should not mutate input data.
  • ✔ Pipes are a fundamental Angular interview topic.

Next Article

➡️ 27-Custom-Pipes-QA.md