Angular Templates: Pipes in Templates (|)

Format and transform values inline using the | operator.

What are Pipes in Templates (|)?

• Transform values for display using the | operator.
• Accept optional arguments (e.g., formats, locales).
• Multiple pipes can be chained.

When to use Pipes

• Format dates, numbers, and text directly in the template.
• Use pure pipes for performance.
• Move complex or side-effectful logic to the component.

{{ amount | currency:'USD' }}

{{ amount | currency:'USD' }}: Formats amount as US dollars using the built-in CurrencyPipe.

Example

Transform values using pipes:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Built-in pipes</h3>
    <p>Today: {{ today | date:'yyyy-MM-dd' }}</p>
    <p>Name: {{ name | uppercase }}</p>
    <p>Chained: {{ ratio | percent:'1.0-2' | uppercase }}</p>
  `
})
export class App {
  today = new Date();
  name = 'Ada Lovelace';
  ratio = 0.756;
}

bootstrapApplication(App);

<app-root></app-root>

Example explained

• date:'yyyy-MM-dd': Formats the today Date using the provided format string (year-month-day). Locale defaults apply unless specified.
• uppercase: Transforms the string value of name to upper case.
• percent:'1.0-2': Formats ratio as a percentage with digitsInfo (minInteger.minFraction-maxFraction): 1 integer digit, 0–2 fraction digits.
• Chaining: Pipes run left to right. ratio | percent:'1.0-2' | uppercase first formats a percent string, then uppercases it.