Pipes

Pipes

What it means

A pipe transforms a value directly in the template using the | syntax — {{ value | pipeName }} — without cluttering the component class with formatting logic. Angular ships several built-in pipes (date, currency, uppercase, json, async), and you can write your own with @Pipe().

Examples

@Component({
  selector: 'app-order',
  template: `
    <p>{{ orderDate | date:'mediumDate' }}</p>            <!-- "Jun 15, 2026" -->
    <p>{{ total | currency:'USD' }}</p>                    <!-- "$42.50" -->
    <p>{{ name | uppercase }}</p>                           <!-- "ALICE" -->
    <p>{{ items | json }}</p>                               <!-- pretty-printed for debugging -->
    <p>{{ description | slice:0:50 }}...</p>                <!-- truncate to 50 chars -->
  `,
})
export class OrderComponent {
  orderDate = new Date();
  total = 42.5;
  name = 'alice';
  items = [1, 2, 3];
  description = 'A very long product description...';
}

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

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    return value.length > limit ? value.slice(0, limit) + '...' : value;
  }
}
// usage: {{ description | truncate:30 }}

Common mistake

Writing a custom pipe that isn’t marked pure correctly, or relying on a pipe to react to in-place mutations of an array/object — by default, pipes are “pure” and only re-run when the reference they receive changes, not when its internal contents mutate.

// Component mutates the array in place
addItem(item: string) {
  this.items.push(item);   // same array reference! a pure pipe won't notice this change
}

// The pipe (e.g. a custom filter/sort pipe) won't re-run, so the template looks stale

// Fix: create a new array reference so change detection notices
addItem(item: string) {
  this.items = [...this.items, item];   // new reference -- pure pipe re-runs correctly
}

Quick practice

1. What does {{ total | currency:'USD' }} do?

   Answer

   Formats the total value as US currency (e.g. $42.50) directly in the template, using Angular's built-in currency pipe.

2. Why doesn’t a pure pipe re-run when you push a new item into an array in place?

   Answer

   Pure pipes only re-evaluate when the input's reference changes; mutating an array in place (like .push()) keeps the same reference, so Angular's change detection doesn't consider the input "changed."

3. What interface must a custom pipe class implement?

   Answer

   PipeTransform, providing a transform() method that takes the input value (plus optional arguments) and returns the transformed result.