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
@Pipedecorator and implement thePipeTransforminterface. - ⚡ 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!