Pipes - Data Transformation

📚 What are Pipes?

Pipes are simple functions that transform data in templates.

Pure Pipes: Only execute when input value changes (default)
Impure Pipes: Execute on every change detection cycle (pure: false)
Chaining: Pipes can be chained: {{ value | pipe1 | pipe2 }}
Arguments: Pass with colon: {{ value | pipe:arg1:arg2 }}

🎯 Interview Questions

Q1: What is the difference between pure and impure pipes?
A: Pure pipes only run when input reference changes. Impure pipes run on every change detection.
Q2: What is the async pipe and why is it useful?
A: Auto-subscribes to Observable/Promise, returns value, and auto-unsubscribes on destroy. Prevents memory leaks!
Q3: How do you create a custom pipe?
A: Create class with @Pipe decorator, implement PipeTransform interface, define transform() method.

🔧 Built-in Pipes Demo

DatePipe

Wednesday, February 4, 2026

CurrencyPipe

$1,234.56

UpperCasePipe

HELLO ANGULAR

LowerCasePipe

hello angular

DecimalPipe

3.1416

PercentPipe

85.6%

SlicePipe

This is a very long ...

JsonPipe

{ "name": "John", "age": 30 }

🔧 Custom Pipes Demo

ExponentialPipe (2^10)

1024

TruncatePipe (limit: 30)

This is a very long text that ...

🔧 Async Pipe Demo (Auto-subscribing)

Observable timer (updates every second)

seconds

💻 Custom Pipe Code


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

// Custom Pure Pipe
@Pipe({
  name: 'exponential',
  pure: true, // Default - recalculates only when input changes
})
export class ExponentialPipe implements PipeTransform {
  transform(value: number, exponent = 1): number {
    return Math.pow(value, exponent);
  }
}

// Usage in template:
// {{ 2 | exponential:10 }}  // Output: 1024

// Async Pipe Example (auto-subscribes and unsubscribes)
timer$ = interval(1000);
// {{ timer$ | async }}  // Auto-subscribes!

// Chaining Pipes
// {{ 'hello' | uppercase | slice:0:3 }}  // Output: HEL