Pipes: Transforming Template Data

8 min read

Built-In Pipes

Pipes transform displayed values in templates without mutating the underlying data. Angular ships with many built-in pipes for common formatting needs. Use the | character followed by the pipe name and optional parameters.

import { Component } from '@angular/core';
import {
  CurrencyPipe, DatePipe, UpperCasePipe,
  LowerCasePipe, DecimalPipe, JsonPipe, AsyncPipe
} from '@angular/common';

@Component({
  selector: 'app-pipes-demo',
  standalone: true,
  imports: [CurrencyPipe, DatePipe, UpperCasePipe, DecimalPipe, JsonPipe],
  template: `
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ price | currency:'EUR':'symbol':'1.2-2' }}</p>
    <p>{{ today | date:'longDate' }}</p>
    <p>{{ today | date:'dd/MM/yyyy' }}</p>
    <p>{{ 'hello world' | uppercase }}</p>
    <p>{{ 3.14159 | number:'1.2-2' }}</p>
    <pre>{{ data | json }}</pre>
  `
})
export class PipesDemoComponent {
  price = 1299.99;
  today = new Date();
  data = { key: 'value', count: 42 };
}

Writing a Custom Pipe

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

@Pipe({
  name: 'truncate',
  standalone: true
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 100, ellipsis = '...'): string {
    if (value.length <= limit) return value;
    return value.slice(0, limit).trimEnd() + ellipsis;
  }
}

Pipes are pure by default: Angular only re-runs them when the input reference changes. For pipes that must re-run on every change detection cycle (e.g., filtering a mutable array), set pure: false — but use this sparingly as it impacts performance.

Ready to test yourself?

Practice Angular— quiz & coding exercises