Pipes in Angular

Definition (interview-ready):
Pipes are used to transform data in templates without modifying the original data.

Think of pipes as formatters for display.

Basic Syntax

{{ value | pipeName }}

Example:

{{ today | date }}

Common Built-in Pipes (VERY IMPORTANT)

1. Date Pipe

{{ today | date:'short' }}

✔ Formats date
✔ Custom formats possible

2. UpperCase / LowerCase

{{ name | uppercase }}
{{ name | lowercase }}

3. Currency Pipe

{{ price | currency:'INR' }}

✔ Formats currency based on locale

4. Decimal Pipe

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

✔ Controls decimal places

5. Percent Pipe

{{ value | percent }}

6. Slice Pipe

{{ items | slice:0:3 }}

✔ Extracts part of array/string

7. Json Pipe (useful for debugging)

{{ data | json }}

Chaining Pipes

{{ amount | currency:'INR' | uppercase }}

✔ Output of one pipe becomes input of next

Passing Parameters

{{ today | date:'fullDate' }}

Pure vs Impure Pipes (IMPORTANT INTERVIEW TOPIC)

Pure Pipes (default)

✔ Executes only when input reference changes
✔ Fast and optimized

Example:

@Pipe({ name: 'myPipe', pure: true })

Impure Pipes

✔ Executes on every change detection cycle
✔ Can impact performance

Example:

@Pipe({ name: 'myPipe', pure: false })

Interview Insight

• Use pure pipes whenever possible

• Avoid impure pipes unless necessary (like real-time filtering)

Custom Pipes in Angular

Definition:
Custom pipes allow you to create your own data transformation logic.

How to Create a Custom Pipe

Step 1: Generate Pipe

ng generate pipe capitalize

Step 2: Implement Pipe

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);
  }
}

---

Step 3: Use in Template

{{ 'hello' | capitalize }}

✔ Output: Hello

Custom Pipe with Parameters

transform(value: string, limit: number): string {
  return value.length > limit ? value.substring(0, limit) + '...' : value;
}

Usage:

{{ text | truncate:10 }}

Real-world Example (INTERVIEW GOLD)

Filtering list (impure pipe example)

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items || !searchText) return items;
    return items.filter(item => item.name.includes(searchText));
  }
}

Important Warning (Interview Trick)

Filtering using pipes is NOT recommended for large data

✔ Why?

• Runs frequently (especially impure pipes)

• Performance issues

✔ Better approach:

• Filter in component or backend

Key Differences

Feature	Built-in Pipes	Custom Pipes
Availability	Angular provides	Developer creates
Flexibility	Limited	Fully customizable
Example	date, currency	capitalize, filter

Common Interview Questions

1. Do pipes modify original data?

❌ No → Only transform for display

2. Difference between pipe and function in template?

• Pipes are optimized (pure by default)

• Functions execute on every change detection

3. When to use impure pipes?

• When data changes without reference change

• Example: filtering mutable arrays

4. Can we chain pipes?

✔ Yes

5. Where should heavy transformations happen?

✔ In component/service, not pipes

Best Practices

• Prefer pure pipes

• Avoid heavy computations inside pipes

• Don’t overuse pipes for business logic

• Use pipes mainly for presentation logic

Final One-Line Summary

• Pipes → Transform data for display

• Custom Pipes → Your own reusable transformations