What are Pipes in Angular?

💡 Concept Name

Pipes – Pipes in Angular are used to transform data before displaying it in the template, such as formatting dates, currency, or filtering arrays.

📘 Quick Intro

Pipes in Angular offer a clean and declarative way to transform values within templates. Angular provides built-in pipes like DatePipe, CurrencyPipe, and also allows creating custom pipes.

🧠 Analogy / Short Story

Think of a pipe like a coffee filter. You pour raw ground coffee (data) into it, and out comes filtered coffee (formatted output). Similarly, pipes format and clean raw values before presenting them.

🔧 Technical Explanation

🔁 Pipes use the | symbol in Angular templates to apply transformations.
📦 Built-in pipes include date, uppercase, lowercase, currency, percent, etc.
🔧 Custom pipes are defined using the @Pipe decorator and implement the PipeTransform interface.
⚡ Pipes can be pure (default) or impure, affecting when they re-evaluate.

🎯 Purpose & Use Case

✅ Formatting dates, currencies, and numbers.
✅ Transforming string casing (uppercase/lowercase).
✅ Filtering or transforming lists and arrays.
✅ Creating custom formatting logic for domain-specific needs.

💻 Real Code Example

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

@Pipe({
  name: 'exclamation'
})
export class ExclamationPipe implements PipeTransform {
  transform(value: string): string {
    return value + '!';
  }
}

❓ Interview Q&A

Q1: What are pipes in Angular?
A: Pipes are tools used to transform displayed data in templates.

Q2: What symbol is used to apply a pipe in templates?
A: The | (pipe) symbol.

Q3: What are some built-in Angular pipes?
A: date, uppercase, currency, percent.

Q4: How do you define a custom pipe?
A: Use the @Pipe decorator and implement PipeTransform.

Q5: What is a use case for impure pipes?
A: When the pipe must update frequently during change detection (e.g., live clocks).

📝 MCQs

Q1. What symbol is used to apply a pipe in Angular templates?

|
:
*
%

Q2. Which interface must a custom pipe implement?

OnInit
PipeTransform
Directive
NgPipe

Q3. Which of the following is a built-in Angular pipe?

HtmlPipe
FilterPipe
CurrencyPipe
SecurePipe

Q4. What does the uppercase pipe do?

Encrypts data
Converts text to uppercase
Creates a heading
Escapes quotes

Q5. Which decorator is used to define a pipe?

@Injectable(
@Pipe
@Directive
@Component

Q6. Are pipes available in component classes?

Yes
No, only templates
Only services
Only modules

Q7. How are pipes chained together in templates?

Using multiple | symbols
Using +
Using {} brackets
Using () functions

Q8. What type of transformation can pipes do?

Logic execution
Routing
Display formatting
Authentication

Q9. Which pipe is used for numeric transformation?

uppercase
percent
date
json

Q10. When is a pipe re-evaluated?

Never
Only at load
Every 10 seconds
When inputs change or on each detection (impure)

💡 Bonus Insight

Use pipes for display logic only—avoid heavy logic inside pipes to keep templates clean and performant. Prefer pure pipes unless absolutely necessary to use impure ones.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon