Angular pipes look simple — but most developers either underuse them or misuse them.
If you’ve ever written formatting logic inside your component just to display data in the UI, this blog is for you.
Let’s break Angular Pipes clearly, practically, and correctly.
🔹 What Are Angular Pipes?
Angular Pipes are used to transform data in templates without changing the original value.
They are:
Declarative
Reusable
Optimized for UI formatting
Simple example:
<p>{{ price | currency }}</p>
👉 The price value stays the same in your component
👉 Only the view output is transformed
🔹 Why Pipes Exist (Real Problem)
Without pipes, templates become messy:
<p>{{ price.toFixed(2) }}</p>
<p>{{ name.toUpperCase() }}</p>
Now imagine this logic repeated in 10 components 😵💫
Pipes solve this by:
Centralizing logic
Keeping templates clean
Improving readability
🔹 Built-in Angular Pipes (Most Used)
1️⃣ Date Pipe
<p>{{ today | date:'dd MMM yyyy' }}</p>
Output:
09 Jan 2026
2️⃣ Currency Pipe
<p>{{ amount | currency:'INR' }}</p>
Output:
₹1,250.00
3️⃣ UpperCase / LowerCase
<p>{{ username | uppercase }}</p>
4️⃣ Decimal Pipe
<p>{{ rating | number:'1.1-2' }}</p>
5️⃣ Slice Pipe
<p>{{ title | slice:0:10 }}</p>
🔹 Chaining Pipes (Very Powerful)
Angular allows multiple pipes together:
<p>{{ name | uppercase | slice:0:5 }}</p>
Output:
ANSHU
Readable + clean + expressive.
🔹 Creating a Custom Pipe (Real Use Case)
🧠 Scenario
You want to display “Active” / “Inactive” instead of true / false.
Step 1: Generate Pipe
ng generate pipe status
Step 2: Pipe Implementation
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'status'
})
export class StatusPipe implements PipeTransform {
transform(value: boolean): string {
return value ? 'Active' : 'Inactive';
}
}
Step 3: Use in Template
<p>{{ user.isActive | status }}</p>
Output:
Active
🔹 Pure vs Impure Pipes (IMPORTANT)
✅ Pure Pipes (Default)
Executes only when input changes
Very fast
Best for formatting
@Pipe({
name: 'status',
pure: true
})
Angular assumes the pipe is pure by default.
⚠️ Impure Pipes
Runs on every change detection cycle.
@Pipe({
name: 'filterData',
pure: false
})
❌ Can kill performance
✔ Use only when absolutely required
🔹 Pipe with Arguments
Example: Capitalize first letter
transform(value: string, limit: number): string {
return value.slice(0, limit).toUpperCase() + value.slice(limit);
}
Usage:
<p>{{ name | customPipe:1 }}</p>
🔹 Pipes vs Methods in Template
❌ Bad Practice:
<p>{{ getFormattedDate() }}</p>
Why?
Method runs on every change detection
Performance hit
✅ Better:
<p>{{ date | date }}</p>
🔹 When NOT to Use Pipes
Avoid pipes when:
Business logic is complex
Data transformation affects application state
Heavy computations are involved
Pipes are for UI-level transformations only.
🔹 Performance Tip (Senior-Level)
Pipes are faster than methods in templates — but impure pipes are slower than both.
Always ask:
Can this be pure?
Can this be done once in component?
🔥 Real-World Use Cases
✔ Formatting prices
✔ Showing readable dates
✔ Displaying status labels
✔ UI-only transformations
✔ Cleaner HTML templates
✅ Final Takeaway
Angular Pipes are:
Simple on the surface
Powerful when used correctly
Dangerous when misused
Use pipes for presentation, not logic.
Master this, and your Angular code instantly looks cleaner and more professional.
Top comments (0)