Pipes

A pipe is a small function you call from a template to turn a value into the thing you want to display: a Date into Mar 5, 2026, 1234.5 into $1,234.50, an observable into its latest value. You write the value, a |, then the pipe's name: {{ placed | date }}. The component keeps the raw data; the pipe only decides how it looks.

The mental model is a Unix pipe at display time. Data flows left to right through one or more transforms, and whatever comes out the right-hand end is what Angular writes into the DOM. Nothing flows back: the pipe never changes placed on the component, it just returns a new value for this binding.

Under the hood a pipe is a class with a transform() method and a @Pipe({ name }) decorator. When the template compiler sees placed | date, it creates one instance of DatePipe for that spot in the view and, during change detection, calls transform(placed) on it. Two things make pipes more than "a function call with funny syntax", and both come up in interviews:

• Purity — by default Angular remembers the last input and skips transform() when the input hasn't changed (see Pure and impure pipes). That's what makes a pipe cheaper than calling a method from the template (Pipes vs method calls).
• State — because each usage gets its own instance, a pipe can hold state between checks. The async pipe uses that to keep a subscription open (The async pipe).

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

@Component({
  selector: 'app-order-summary',
  imports: [DatePipe, CurrencyPipe],
  template: `<p>Placed {{ placed | date }} for {{ price | currency }}</p>`,
})
export class OrderSummary {
  placed = new Date(2026, 2, 5, 14, 7);
  price = 1234.5;
}

Angular ships a set of pipes in @angular/common. All of them are locale-aware where it matters, using LOCALE_ID (which defaults to en-US). The outputs below are the real rendered text from a TestBed test in Angular 22.2, en-US locale.

@Component({
  selector: 'app-builtins',
  imports: [
    DatePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe,
    KeyValuePipe, UpperCasePipe, LowerCasePipe, TitleCasePipe, SlicePipe,
  ],
  templateUrl: './builtins.html',
})
export class Builtins {
  placed = new Date(2026, 2, 5, 14, 7); // 5 March 2026, 14:07 local time
  price = 1234.5;
  ratio = 3141.59265;
  name = 'aNGULAR signals rock';
  tags = ['ng', 'rxjs', 'signals'];
  user = { id: 7, roles: ['admin'] };
  scores = { zoe: 3, adam: 9, mia: 5 };
}

<!-- date -->
{{ placed | date }}                       <!-- Mar 5, 2026 -->
{{ placed | date: 'short' }}              <!-- 3/5/26, 2:07 PM -->
{{ placed | date: 'fullDate' }}           <!-- Thursday, March 5, 2026 -->
{{ placed | date: 'yyyy-MM-dd HH:mm' }}   <!-- 2026-03-05 14:07 -->
{{ placed | date: 'h:mm a' }}             <!-- 2:07 PM -->

<!-- currency -->
{{ price | currency }}                         <!-- $1,234.50 -->
{{ price | currency: 'EUR' }}                  <!-- €1,234.50 -->
{{ price | currency: 'CAD' }}                  <!-- CA$1,234.50 -->
{{ price | currency: 'CAD' : 'symbol-narrow' }} <!-- $1,234.50 -->
{{ price | currency: 'INR' : 'code' : '1.0-0' }} <!-- INR1,235 -->

<!-- number and percent -->
{{ ratio | number }}           <!-- 3,141.593 -->
{{ ratio | number: '1.0-0' }}  <!-- 3,142 -->
{{ 7 | number: '3.2-2' }}      <!-- 007.00 -->
{{ 0.256 | percent }}          <!-- 26% -->
{{ 0.256 | percent: '1.1-1' }} <!-- 25.6% -->

<!-- text -->
{{ name | uppercase }}  <!-- ANGULAR SIGNALS ROCK -->
{{ name | lowercase }}  <!-- angular signals rock -->
{{ name | titlecase }}  <!-- Angular Signals Rock -->

<!-- slice, json, keyvalue -->
{{ tags | slice: 0 : 2 }}  <!-- ng,rxjs -->
{{ name | slice: -5 }}     <!-- " rock" (5 characters, including the space) -->
<pre>{{ user | json }}</pre> <!-- pretty-printed JSON, 2-space indent -->
@for (entry of scores | keyvalue; track entry.key) {
  <li>{{ entry.key }}={{ entry.value }}</li>   <!-- adam=9, mia=5, zoe=3 -->
}

Arguments go after the pipe name, each introduced by a colon: value | pipe: arg1 : arg2. They map positionally onto the extra parameters of transform(value, arg1, arg2). Arguments can be any template expression — literals, component fields, signals called with ().

Chaining feeds the output of one pipe into the next: value | a | b is b.transform(a.transform(value)). Order matters, because each pipe only sees what the previous one returned.

<!-- title = 'Understanding Angular pipes in depth', placed = 5 Mar 2026, isAdmin = true -->
<p>{{ title | truncate }}</p>                    <!-- Understanding Angula… -->
<p>{{ title | truncate: 10 }}</p>                <!-- Understand… -->
<p>{{ title | truncate: 10 : '...' }}</p>        <!-- Understand... -->
<p>{{ title | truncate: 10 | uppercase }}</p>    <!-- UNDERSTAND… -->
<p>{{ placed | date: 'MMM d' | uppercase }}</p>  <!-- MAR 5 -->

<p>{{ isAdmin ? 'yes' : 'no' | uppercase }}</p>   <!-- yes  (!) -->
<p>{{ (isAdmin ? 'yes' : 'no') | uppercase }}</p> <!-- YES -->
<p>{{ (placed | date: 'yyyy') + '!' }}</p>       <!-- 2026! -->

When you keep writing the same formatting logic, wrap it in a pipe. A custom pipe is a class with the @Pipe decorator and a transform method; implementing the PipeTransform interface is optional but documents the contract and gets the signature checked.

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

@Pipe({ name: 'truncate' })
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;
  }
}

@Component({
  selector: 'app-chaining',
  imports: [DatePipe, UpperCasePipe, TruncatePipe],
  templateUrl: './chaining.html',
})
export class Chaining {
  title = 'Understanding Angular pipes in depth';
  placed = new Date(2026, 2, 5);
  isAdmin = true;
}

My notes flagged this as very important. A pure pipe (the default) is treated like a pure function: same input and arguments → same output. Angular stores the last input and arguments for each pipe usage and, on every change detection, compares the new ones with ===. If nothing changed, it reuses the last result and doesn't call transform() at all.

That reference check is the whole story. A primitive ('abc', 42) changes when its value changes. An object or array changes only when you replace it with a new reference; pushing into an array or setting a property on an object leaves the reference the same, so a pure pipe never sees the change.

An impure pipe (pure: false) skips the cache: transform() runs on every change detection of the view, whether or not anything changed. That lets it notice mutation, at the cost of running far more often. The mental model: a pure pipe is a memoised function keyed on references; an impure pipe is a method call in a pipe's clothes.

export const calls = { pure: 0, impure: 0 };

@Pipe({ name: 'pending' })
export class PendingPipe implements PipeTransform {
  transform(todos: Todo[]): Todo[] {
    calls.pure++;
    return todos.filter((t) => !t.done);
  }
}

@Pipe({ name: 'pendingImpure', pure: false })
export class PendingImpurePipe implements PipeTransform {
  transform(todos: Todo[]): Todo[] {
    calls.impure++;
    return todos.filter((t) => !t.done);
  }
}

@Component({
  selector: 'app-purity',
  imports: [PendingPipe, PendingImpurePipe],
  template: `
    <p id="pure">{{ (todos | pending).length }} pending (pure)</p>
    <p id="impure">{{ (todos | pendingImpure).length }} pending (impure)</p>
    <p>{{ clicks() }}</p>
    <button id="mutate" (click)="addByPush()">push</button>
    <button id="replace" (click)="addByCopy()">copy</button>
    <button id="noop" (click)="clicks.set(clicks() + 1)">other</button>
  `,
})
export class Purity {
  todos: Todo[] = [
    { title: 'Learn pipes', done: false },
    { title: 'Learn signals', done: true },
  ];
  clicks = signal(0);

  addByPush() {
    this.todos.push({ title: 'Write tests', done: false }); // same array reference
  }

  addByCopy() {
    this.todos = [...this.todos, { title: 'Ship it', done: false }]; // new reference
  }
}

calls.pure = calls.impure = 0;
const f = TestBed.createComponent(Purity);
await f.whenStable();
const el = f.nativeElement as HTMLElement;
expect(calls).toEqual({ pure: 1, impure: 1 });

click(el, '#noop');
await f.whenStable();
expect(calls).toEqual({ pure: 1, impure: 2 });

click(el, '#mutate');
await f.whenStable();
expect(text(el, '#pure')).toBe('1 pending (pure)'); // stale
expect(text(el, '#impure')).toBe('2 pending (impure)');
expect(calls).toEqual({ pure: 1, impure: 3 });

click(el, '#replace');
await f.whenStable();
expect(text(el, '#pure')).toBe('3 pending (pure)');
expect(calls).toEqual({ pure: 2, impure: 4 });

user = { name: 'ada' };
rename() { this.user.name = 'grace'; }
// template: {{ user | displayName }}  — displayName is pure; rename() runs from a click

My notes mark this "very important !!!!". In a template, {{ total() }} where total is a method looks harmless, but Angular can't know whether a method's result changed without calling it. So a method in a template runs every time the view is checked. A pure pipe with the same logic runs only when its input reference changes, and a computed() signal runs only when a signal it read changes.

How often "every time the view is checked" is depends on the change detection model. In the old zone.js world with the Default strategy, every click, timer or HTTP response anywhere in the app checked every component, so a template method could run hundreds of times. In Angular 22, new components are OnPush by default (the ChangeDetectionStrategy docs say "OnPush is enabled by default"; the old Default is now called Eager) and apps are zoneless, so a view is checked less often — but every check still re-runs every method call in it. Here's the count:

export const counts = { method: 0, pipe: 0, computed: 0 };

@Pipe({ name: 'cartTotal' })
export class CartTotalPipe implements PipeTransform {
  transform(lines: Line[]): number {
    counts.pipe++;
    return lines.reduce((sum, l) => sum + l.price * l.qty, 0);
  }
}

@Component({
  selector: 'app-cart',
  imports: [CartTotalPipe],
  template: `
    <p>{{ totalMethod() }}</p>
    <p>{{ lines | cartTotal }}</p>
    <p>{{ total() }}</p>
    <p id="likes">{{ likes() }}</p>
    <button (click)="likes.set(likes() + 1)">like</button>
  `,
})
export class Cart {
  lines: Line[] = [
    { price: 10, qty: 2 },
    { price: 5, qty: 1 },
  ];
  likes = signal(0);

  linesSig = signal(this.lines);
  total = computed(() => {
    counts.computed++;
    return this.linesSig().reduce((sum, l) => sum + l.price * l.qty, 0);
  });

  totalMethod(): number {
    counts.method++;
    return this.lines.reduce((sum, l) => sum + l.price * l.qty, 0);
  }
}

counts.method = counts.pipe = counts.computed = 0;
const f = TestBed.createComponent(Cart);
await f.whenStable();
expect(counts).toEqual({ method: 1, pipe: 1, computed: 1 });

for (let i = 0; i < 3; i++) {
  clickText(f.nativeElement, 'like');
  await f.whenStable();
}
expect(counts).toEqual({ method: 4, pipe: 1, computed: 1 });

My notes call this one a head twister, so let's take it slowly. The async pipe takes an Observable (or anything with subscribe) or a Promise, subscribes for you, returns the latest value it has received, and unsubscribes when the view is destroyed. Before the first value arrives it returns null.

Think of it as a mailbox the view owns. On the first check, the pipe opens the mailbox (subscribes). Every time the observable emits, the value is dropped in the mailbox and the pipe asks Angular to check this view again (markForCheck). Each check simply reads whatever is in the mailbox. When the component is destroyed, the mailbox is closed (unsubscribe), so there's no leak.

This is the Angular 22 source of the pipe's transform, trimmed (@angular/common):

transform(obj) {
  if (!this._obj) {
    if (obj) {
      this.markForCheckOnValueUpdate = false;
      this._subscribe(obj);          // first call: subscribe
      this.markForCheckOnValueUpdate = true;
    }
    return this._latestValue;        // null until something arrives
  }
  if (obj !== this._obj) {           // a different observable?
    this._dispose();                 // unsubscribe from the old one, reset to null
    return this.transform(obj);      // and subscribe to the new one
  }
  return this._latestValue;
}

_updateLatestValue(async, value) {   // called on every emission
  if (async === this._obj) {
    this._latestValue = value;
    if (this.markForCheckOnValueUpdate) this._ref?.markForCheck();
  }
}

ngOnDestroy() { this._dispose(); }   // unsubscribe with the view

@Injectable({ providedIn: 'root' })
export class UserStore {
  readonly user$ = new Subject<User>();
}

@Component({
  selector: 'app-profile',
  imports: [AsyncPipe],
  template: `
    @if (store.user$ | async; as user) {
      <p id="name">Hello, {{ user.name }}</p>
    } @else {
      <p id="loading">Loading…</p>
    }
  `,
})
export class Profile {
  protected store = inject(UserStore);
}

const store = TestBed.inject(UserStore);
const f = TestBed.createComponent(Profile);
expect(store.user$.observed).toBe(false);        // created, but no check yet

await f.whenStable();
expect(store.user$.observed).toBe(true);         // first check subscribed
expect(text(el, '#loading')).toBe('Loading…');  // async returned null

store.user$.next({ name: 'Grace', email: 'g@example.com' });
expect(text(el, '#name')).toBeNull();            // value stored, DOM not updated yet

await f.whenStable();
expect(text(el, '#name')).toBe('Hello, Grace');

f.destroy();
expect(store.user$.observed).toBe(false);        // unsubscribed with the view

<!-- store.cold$ is a cold observable that counts its subscribers -->
<p>{{ (store.cold$ | async)?.name }}</p>
<p>{{ (store.cold$ | async)?.email }}</p>       <!-- subscribeCount: 2 -->

@if (store.cold$ | async; as user) {             <!-- subscribeCount: 1 -->
  <p>{{ user.name }}</p>
  <p>{{ user.email }}</p>
}

@Component({
  selector: 'app-fresh',
  imports: [AsyncPipe],
  template: `
    <p>{{ (load() | async)?.name }}</p>
    <button (click)="likes.set(likes() + 1)">like</button>
  `,
})
export class Fresh {
  private store = inject(UserStore);
  likes = signal(0);
  load() {
    return this.store.cold$.pipe(map((u) => u)); // a NEW Observable on every call
  }
}
// After the first render subscribeCount is 1; after three "like" clicks it is 4.

<!-- count$ = of(0) -->
@if (count$ | async; as count) {
  <p>{{ count }} unread</p>          <!-- never rendered: 0 is falsy -->
}

@let unread = count$ | async;
@if (unread !== null) {
  <p>{{ unread }} unread</p>         <!-- "0 unread" -->
}

<!-- user$ = this.http.get<User>('/api/me') — a field, created once -->
<h1>{{ (user$ | async)?.name }}</h1>
<img [src]="(user$ | async)?.avatarUrl" />
@if ((user$ | async)?.isAdmin) { <app-admin-menu /> }

A signal is not a stream you subscribe to; it's a value container you read by calling it. {{ count() }} reads the current value, and because the template read it, Angular records the signal as a dependency of this view. When the signal changes, Angular knows exactly which views to check. There's nothing to subscribe to and nothing to clean up, so the async pipe is only for observables and promises — my notes put it exactly that way.

@Component({
  selector: 'app-sig',
  imports: [JsonPipe],
  template: `
    <p>{{ count() }}</p>
    <pre id="wrong">{{ settings | json }}</pre>
    <pre id="right">{{ settings() | json }}</pre>
    <p>{{ user()?.name ?? 'none yet' }}</p>
  `,
})
export class Sig {
  private store = inject(UserStore);
  count = signal(3);
  settings = signal({ theme: 'dark' });
  user = toSignal(this.store.user$); // Signal<User | undefined>
}