Pipes: built-in and custom

A pipe is a transformer function for templates. You pass a value to a pipe through a vertical bar, and it returns the value in the form you need: a date as "Oct 3, 2026", a number as an amount in euros. The data in the class does not change.

The first pipe

Built-in pipes live in @angular/common, and each one must be added to the component's imports:

// src/app/post-detail/post-detail.ts
import { Component } from '@angular/core';
import { UpperCasePipe } from '@angular/common';
 
@Component({
  selector: 'app-post-detail',
  imports: [UpperCasePipe],
  templateUrl: './post-detail.html',
})
export class PostDetail {
  title = 'News of the week';
}

<!-- src/app/post-detail/post-detail.html -->
<h2>{{ title | uppercase }}</h2>

The page shows the heading in capital letters: "NEWS OF THE WEEK".

Parameters

Parameters follow the pipe name after a colon:

<!-- src/app/post-detail/post-detail.html -->
<p>{{ published | date: 'dd.MM.yyyy HH:mm' }}</p>
<p>{{ price | currency: 'EUR' }}</p>
<p>{{ rating | number: '1.1-1' }}</p>
<p>{{ body | slice: 0 : 100 }}...</p>

If published = new Date(2026, 9, 3, 14, 5), price = 9.5 and rating = 4.25, the page shows "03.10.2026 14:05", "€9.50", "4.3" and the first hundred characters of the text. Add the classes you need to imports: DatePipe, CurrencyPipe, DecimalPipe, SlicePipe.

Useful built-in pipes

Pipes can be chained: {{ title | slice: 0 : 20 | uppercase }}.

A custom pipe

Let's make a pipe that cuts long text and adds an ellipsis:

ng generate pipe truncate

The CLI creates src/app/truncate-pipe.ts (before version 20 — truncate.pipe.ts):

// src/app/truncate-pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 50): string {
    return value.length > limit ? value.slice(0, limit) + '…' : value;
  }
}

The transform method receives the value and the parameters and returns the result. The name used in templates is set by name.

<!-- src/app/post-list/post-list.html -->
@for (post of posts(); track post.id) {
  <p>{{ post.body | truncate: 80 }}</p>
}

Add TruncatePipe to the imports of PostList — each post shows at most 80 characters of text with an ellipsis.

Common mistake

Expecting a local format from date and currency without setup. By default Angular uses the en-US locale: month names are English, and amounts use a dot as the decimal separator. For another locale you register it with registerLocaleData and set the LOCALE_ID provider in app.config.ts; until then, pass the format explicitly, as in the example above.