Angular Tutorial

Advanced Angular

Angular Exercises

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.

Top Tutorials

Top References

Top Examples