Angular Pipes
Dashboard
Topic 9/10
Home › Angular › Angular Pipes

🚿 Angular Pipes

Built-in pipes (date, currency, json, async), pure vs impure pipes, and custom pipe creation.

What is an Angular Pipe?

Pipes are simple functions designed to transform values directly within template HTML expressions without mutating original component state.

Built-in Angular Pipes

Angular comes with several common built-in pipes.

Pipe Example Syntax Result Output
DatePipe {{ today | date:'mediumDate' }} Jul 23, 2026
UpperCasePipe {{ 'hello' | uppercase }} HELLO
CurrencyPipe {{ 49.99 | currency:'USD' }} $49.99
PercentPipe {{ 0.85 | percent }} 85%
JsonPipe {{ userObject | json }} Formatted JSON string
AsyncPipe {{ data$ | async }} Auto-subscribes & unwraps Observable

Creating a Custom Pipe

Use `@Pipe` decorator and implement `PipeTransform` interface to build custom pipes.

truncate.pipe.ts TypeScript 
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
  standalone: true
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return '';
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

Pure vs Impure Pipes

Pipes are pure by default. A pure pipe executes only when Angular detects a primitive value change or reference object change. An impure pipe executes during every change detection cycle.

Note: Avoid impure pipes for heavy computations as they can lead to noticeable UI performance degradation.