Angular Template Pipes

Pipes transform a bound value into a more presentable form directly inside a template, using a simple pipe-character syntax.

The | Syntax

A pipe takes input data and returns a transformed value for display, without changing the underlying property in the component class. Pipes are applied with the pipe character inside interpolation or a binding: {{ value | pipeName }}.

Using built-in pipes

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

@Component({
  selector: 'app-receipt',
  standalone: true,
  imports: [CurrencyPipe, DatePipe, UpperCasePipe],
  template: `
    <p>{{ storeName | uppercase }}</p>
    <p>Total: {{ amount | currency:'USD' }}</p>
    <p>Date: {{ purchasedOn | date:'longDate' }}</p>
  `
})
export class ReceiptComponent {
  storeName = 'corner bakery';
  amount = 18.5;
  purchasedOn = new Date();
}

bootstrapApplication(ReceiptComponent).catch(err => console.error(err));

Commonly Used Built-In Pipes

Pipe	Purpose	Example
uppercase / lowercase	Changes text case	{{ name \| uppercase }}
date	Formats a Date value	{{ today \| date:'shortDate' }}
currency	Formats a number as money	{{ price \| currency:'EUR' }}
decimal (number)	Formats numeric precision	{{ pi \| number:'1.2-2' }}
json	Pretty-prints an object, useful for debugging	{{ user \| json }}
slice	Extracts a subset of an array or string	{{ items \| slice:0:3 }}

Chaining and Passing Parameters

Pipes can be chained, applying one after another from left to right, and many pipes accept parameters after a colon to customize their output, such as a currency code or a date format string.

Chained pipes with parameters

import { Component } from '@angular/core';
import { UpperCasePipe, DatePipe } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-article-header',
  standalone: true,
  imports: [UpperCasePipe, DatePipe],
  template: `
    <h1>{{ title | uppercase }}</h1>
    <p>Published {{ publishedAt | date:'MMMM d, y' | uppercase }}</p>
  `
})
export class ArticleHeaderComponent {
  title = 'angular pipes explained';
  publishedAt = new Date('2026-03-14');
}

bootstrapApplication(ArticleHeaderComponent).catch(err => console.error(err));

Writing a Custom Pipe

When no built-in pipe fits, you can create your own with the @Pipe decorator and a transform method. Custom pipes are standalone by default and must be added to a component's imports array before use.

A custom truncate pipe

import { Component, Pipe, PipeTransform } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@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;
  }
}

// Demo component showing the pipe applied in a template.
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TruncatePipe],
  template: `
    <p>{{ description | truncate:40 }}</p>
  `
})
export class AppComponent {
  description = 'Angular pipes transform values for display without changing the underlying data.';
}

bootstrapApplication(AppComponent).catch(err => console.error(err));

Pipes never mutate the original data - they only affect what is displayed
Multiple pipes can be chained with additional | characters
Parameters are passed after a colon: value | pipeName:param1:param2
Custom pipes implement PipeTransform and its transform() method
Pipes must be listed in a standalone component's imports array

Note: Angular pipes are 'pure' by default, meaning they only re-run when their input reference changes. This keeps templates fast even with many pipes in use.

Note: Avoid pipes that perform expensive work (like sorting large arrays) directly with object or array literals in a template - since a new reference is created on every check, a pure pipe will re-run far more often than expected.

Keep Going

Angular Interview QuestionsPractice real questions asked for Angular Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to Angular and tweak your resume