Angular Pipes: Format Data (Date, Currency, Titlecase)

Pipes format data directly in the template, keeping your component code cleaner.

Common built-in pipes

Date pipe

<p>Joined: {{ joinedAt | date:'mediumDate' }}</p>

Currency pipe

<p>Total: {{ total | currency:'USD' }}</p>

Titlecase pipe

<p>{{ fullName | titlecase }}</p>

Example component

export class OrderSummaryComponent {
  joinedAt = new Date('2025-01-01');
  total = 129.99;
  fullName = 'jessica taylor';
}

Why pipes are a big deal

Without pipes, you might write formatting code everywhere. Pipes keep templates readable and consistent.

Next: Create your own custom pipe (useful in real products).