🔧 Pipes for Data Transformation

What Pipes Are

A pipe is a small, reusable function you apply inside a template to transform a value for display only. It takes a value in, returns a transformed value out, and never changes the underlying data. Common jobs: format a date, uppercase text, render a number as currency, or trim a long string.

Doing the same formatting in the component would scatter presentation logic across your TypeScript. Pipes keep that logic declarative and in one place — the template — where it belongs.

Pipe Syntax

You apply a pipe with the vertical bar |. The value on the left is fed into the pipe on the right:

{{ value | pipeName }}

Parameters follow a colon:

{{ value | pipeName:param1:param2 }}

And you can chain pipes — each receives the output of the previous:

{{ birthday | date:'longDate' | uppercase }}

One important detail with standalone components: a pipe must be imported before you can use it. Built-in pipes like DatePipe and CurrencyPipe live in @angular/common:

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

@Component({
  selector: 'app-product',
  standalone: true,
  imports: [UpperCasePipe, CurrencyPipe, DatePipe],
  template: `
    <p>Name: {{ product.name | uppercase }}</p>
    <p>Price: {{ product.price | currency:'USD' }}</p>
    <p>Added: {{ product.addedOn | date:'medium' }}</p>
  `
})
export class ProductComponent {
  product = { name: 'headphones', price: 249.99, addedOn: new Date() };
}

Built-in Pipes

Angular ships a rich set of pipes covering the most common formatting needs:

Text pipes

{{ 'angular pipes' | uppercase }}         <!-- ANGULAR PIPES -->
{{ 'Angular Pipes' | lowercase }}         <!-- angular pipes -->
{{ 'angular pipes example' | titlecase }} <!-- Angular Pipes Example -->

Number, percent, and currency

<!-- number:'minIntDigits.minFraction-maxFraction' -->
{{ 1234.5678 | number }}          <!-- 1,234.568 -->
{{ 1234.5678 | number:'1.2-2' }}  <!-- 1,234.57 -->

{{ 0.8456 | percent }}            <!-- 85% -->
{{ 0.8456 | percent:'1.2-2' }}    <!-- 84.56% -->

{{ 49.99 | currency }}                 <!-- $49.99 -->
{{ 49.99 | currency:'EUR' }}           <!-- €49.99 -->
{{ 4999 | currency:'JPY':'code' }}     <!-- JPY 4,999 -->

The date pipe

One of the most-used pipes, with named formats and full custom patterns:

<!-- assume today = new Date() -->
{{ today | date:'fullDate' }}   <!-- Monday, June 15, 2026 -->
{{ today | date:'shortDate' }}  <!-- 6/15/26 -->
{{ today | date:'mediumDate' }} <!-- Jun 15, 2026 -->
{{ today | date:'shortTime' }}  <!-- 1:30 PM -->
{{ today | date:'EEEE, MMMM d, y, h:mm a' }} <!-- Monday, June 15, 2026, 1:30 PM -->
{{ today | date:'medium':'UTC' }}            <!-- with an explicit time zone -->

Object and array pipes

<!-- json is great for debugging -->
<pre>{{ user | json }}</pre>

<!-- keyvalue iterates an object's entries -->
@for (entry of profile | keyvalue; track entry.key) {
  <li>{{ entry.key }}: {{ entry.value }}</li>
}

<!-- slice takes a sub-range of an array (or string) -->
@for (fruit of fruits | slice:0:3; track fruit) {
  <span>{{ fruit }}</span>
}

The async Pipe

The async pipe is special: it subscribes to an Observable or Promise, returns the latest value, and — critically — unsubscribes automatically when the component is destroyed. That single behavior eliminates a whole category of memory-leak bugs.

import { Component } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { interval, map, take } from 'rxjs';

@Component({
  selector: 'app-async-example',
  standalone: true,
  imports: [AsyncPipe],
  template: `
    <h3>Count: {{ counter$ | async }}</h3>

    @if (user$ | async; as user) {
      <h4>Welcome, {{ user.name }}!</h4>
    } @else {
      <p>Loading user data…</p>
    }
  `
})
export class AsyncExampleComponent {
  counter$ = interval(1000).pipe(map(i => i + 1), take(10));

  user$ = new Promise<{ name: string }>(resolve =>
    setTimeout(() => resolve({ name: 'Ada Lovelace' }), 2000));
}

Note the as user syntax: it stashes the resolved value in a template variable so you can use it, and the @else block renders a loading state until the data arrives.

Writing a Custom Pipe

Built-ins cover the basics, but every app needs a few bespoke transforms. Creating one takes four steps: make a class, implement PipeTransform, decorate it with @Pipe, and import it where you use it (modern pipes are standalone: true).

Example: a file-size pipe

Turn a raw byte count into a friendly "3.29 MB":

// file-size.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'fileSize',
  standalone: true
})
export class FileSizePipe implements PipeTransform {
  transform(bytes: number, decimals = 2): string {
    if (!bytes) return '0 Bytes';

    const k = 1024;
    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    const value = parseFloat((bytes / Math.pow(k, i)).toFixed(decimals));

    return `${value} ${units[i]}`;
  }
}

Because it's standalone, you just import it into any component that needs it — no NgModule declaration:

import { Component } from '@angular/core';
import { FileSizePipe } from './file-size.pipe';

@Component({
  selector: 'app-files',
  standalone: true,
  imports: [FileSizePipe],
  template: `
    @for (file of files; track file.name) {
      <li>{{ file.name }} — {{ file.size | fileSize }}</li>
    }
  `
})
export class FilesComponent {
  files = [
    { name: 'Report.pdf',       size: 3_450_000 },     // 3.29 MB
    { name: 'Photos.zip',       size: 147_800_000 },   // 140.95 MB
    { name: 'Config.json',      size: 1_230 },         // 1.2 KB
    { name: 'Backup.iso',       size: 4_700_000_000 }  // 4.38 GB
  ];
}

Report.pdf — 3.29 MB
Photos.zip — 140.95 MB
Config.json — 1.2 KB
Backup.iso — 4.38 GB

The transform method is the whole contract: first argument is the piped value, any further arguments are the parameters after each colon (| fileSize:0 would pass decimals = 0).

Pure vs Impure Pipes

Every pipe is pure by default, and that word has a precise meaning: Angular only re-runs a pure pipe when its input changes by reference. That makes pure pipes fast, because they run rarely. An impure pipe re-runs on every change-detection cycle — powerful, but potentially a performance trap.

The catch with pure pipes: if you mutate an array in place (say, this.items.push(x)), the reference is unchanged, so a pure pipe over that array won't re-run. The fix is to replace the reference (this.items = [...this.items, x]) — which is exactly what signals encourage anyway.

@Pipe({
  name: 'liveFilter',
  standalone: true,
  pure: false   // re-evaluates on every change detection cycle
})
export class LiveFilterPipe implements PipeTransform {
  transform(items: string[], term: string): string[] {
    return items.filter(i => i.toLowerCase().includes(term.toLowerCase()));
  }
}

Hands-on Exercise

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

@Pipe({
  name: 'truncate',
  standalone: true
})
export class TruncatePipe implements PipeTransform {
  transform(value: string | null | undefined, limit = 20, suffix = '…'): string {
    if (!value) return '';
    if (value.length <= limit) return value;
    return value.slice(0, limit).trimEnd() + suffix;
  }
}

// usage
import { Component } from '@angular/core';
import { TruncatePipe } from './truncate.pipe';

@Component({
  selector: 'app-feed',
  standalone: true,
  imports: [TruncatePipe],
  template: `
    @for (post of posts; track post.id) {
      <p>{{ post.body | truncate:50 }}</p>
    }
  `
})
export class FeedComponent {
  posts = [
    { id: 1, body: 'Angular pipes keep your templates clean and expressive.' },
    { id: 2, body: 'Short one.' }
  ];
}

Best Practices

Summary & Quiz

📚 Further Reading

• angular.dev — Pipes
• angular.dev — DatePipe API
• angular.dev — AsyncPipe API

🚀 What's Next?

You've now covered Angular's core building blocks — components, communication, services, and pipes. Next we'll step back and compare the big three frameworks side by side: React vs Vue vs Angular, so you can reason about when to reach for each.