How Do You Create a Custom Pipe in Angular
💡 Concept Name
Custom Pipe – A user-defined transformation function that formats data in Angular templates.
📘 Quick Intro
Pipes in Angular transform displayed values within templates. When built-in pipes are insufficient, you can create your own custom pipe by implementing the PipeTransform interface.
🧠 Analogy / Short Story
Think of a pipe as a coffee filter—it transforms raw coffee into a drinkable form. Similarly, a custom pipe filters or formats raw data into human-friendly output.
🔧 Technical Explanation
- 🔨 Custom pipes are created using
@Pipedecorator. - 📦 Must implement the
PipeTransforminterface. - 🚀 The
transform()method performs the transformation logic. - 🔄 Pipes are used in templates via the
| pipeNamesyntax. - 📁 Register the pipe in the module’s
declarationsarray.
🎯 Purpose & Use Case
- ✅ Formatting text (e.g., capitalize, truncate).
- ✅ Converting status codes to user-friendly labels.
- ✅ Filtering arrays or mapping enums.
💻 Real Code Example
// create a pipe using Angular CLI:
// ng generate pipe capitalize
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'capitalize' })
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
}
}
// usage in template:
{{ 'angular' | capitalize }} // Output: Angular
❓ Interview Q&A
Q1: What is a custom pipe in Angular?
A: A user-defined transformation used to format data in Angular templates.
Q2: Which interface must a custom pipe implement?
A: PipeTransform.
Q3: What method must be defined inside a custom pipe?
A: The transform() method.
Q4: How do you use a pipe in an Angular template?
A: With the | pipeName syntax (e.g., {{ value | capitalize }}).
Q5: Where should the custom pipe be declared?
A: In the module’s declarations array.
📝 MCQs
Q1. Which interface is implemented by a custom pipe?
- OnInit
- PipeTransform
- NgPipe
- PipeModule
Q2. Which method defines transformation logic?
- convert
- apply
- format
- transform
Q3. How is a pipe used in templates?
- With * syntax
- With & syntax
- With | syntax
- With # syntax
Q4. What does the @Pipe decorator define?
- Component class
- Pipe metadata
- Directive
- Service logic
Q5. Where do you declare custom pipes?
- providers
- imports
- exports
- declarations
Q6. Which CLI command creates a pipe?
- ng new pipe
- ng make pipe
- ng generate pipe
- ng pipe create
Q7. What type does transform() return?
- void
- string
- number
- Any type
Q8. Which Angular core package contains Pipe?
- @angular/router
- @angular/core
- @angular/common
- @angular/forms
Q9. Can a pipe accept arguments?
- No
- Yes
- Only one
- Only if pure
Q10. What is the default purity of custom pipes?
- Pure
- Impure
- Manual
- Stateful
💡 Bonus Insight
Pipes can be marked as pure: false in the decorator to respond to every change, but this may impact performance. Always prefer pure pipes unless mutation tracking is necessary.
📄 PDF Download
Need a handy summary for your notes? Download this topic as a PDF!