Built-in Pipes

Pipes transform values for display without changing the underlying data. Angular provides several built-in pipes for common formatting needs.

Date Pipe

@Component({
  selector: 'app-event',
  template: `
    <p>Short: {{ eventDate | date: 'shortDate' }}</p>
    <p>Medium: {{ eventDate | date: 'mediumDate' }}</p>
    <p>Long: {{ eventDate | date: 'longDate' }}</p>
    <p>Full: {{ eventDate | date: 'fullDate' }}</p>
    <p>Custom: {{ eventDate | date: 'MMMM y, d' }}</p>
    <p>Time: {{ eventDate | date: 'shortTime' }}</p>
  `,
})
export class EventComponent {
  eventDate = new Date(2026, 8, 15, 14, 30);
}

Output:

• Short: 9/15/26
• Medium: Sep 15, 2026
• Long: September 15, 2026
• Full: Tuesday, September 15, 2026
• Custom: September 2026, 15
• Time: 2:30 PM

Currency Pipe

@Component({
  selector: 'app-price',
  template: `
    <p>{{ price | currency: 'USD' }}</p>
    <p>{{ price | currency: 'EUR': 'symbol' }}</p>
    <p>{{ price | currency: 'GBP': 'code' }}</p>
    <p>{{ price | currency: 'JPY': 'symbol': '1.0-0' }}</p>
  `,
})
export class PriceComponent {
  price = 1234.56;
}

Output:

• $1,234.56
• €1,234.56
• GBP 1,234.56
• ¥1,235

Decimal and Percent Pipes

@Component({
  selector: 'app-stats',
  template: `
    <p>Decimal: {{ value | number: '1.2-2' }}</p>
    <p>Percent: {{ ratio | percent: '1.0-1' }}</p>
  `,
})
export class StatsComponent {
  value = 3.14159;
  ratio = 0.8567;
}

Output:

• Decimal: 3.14
• Percent: 85.7%

Chaining Pipes

<p>{{ price | currency: 'USD': 'symbol' | uppercase }}</p>

Pipes are applied left to right. The output of one pipe becomes the input of the next.

The async pipe subscribes to an Observable or Promise and returns the latest emitted value. It automatically unsubscribes when the component is destroyed.

Basic Usage

@Component({
  selector: 'app-user-list',
  template: `
    <div *ngIf="users$ | async as users">
      <p *ngFor="let user of users">{{ user.name }}</p>
    </div>

    <div *ngIf="loading$ | async as loading">
      <p>Loading...</p>
    </div>
  `,
})
export class UserListComponent {
  users$ = this.userService.getUsers();
  loading$ = this.userService.loading$;

  constructor(private userService: UserService) {}
}

Why Use async Pipe Instead of subscribe?

// BAD: Manual subscription — must unsubscribe
ngOnInit(): void {
  this.userService.getUsers().subscribe(users => {
    this.users = users;
  });
}

// GOOD: async pipe — auto-unsubscribe
users$ = this.userService.getUsers();

async Pipe with *ngIf as

The as syntax creates a local template variable from the emitted value:

<div *ngIf="user$ | async as user">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
</div>

async Pipe with @if (New Control Flow)

@if (user$ | async; as user) {
  <h2>{{ user.name }}</h2>
} @else {
  <p>Loading...</p>
}

Combining async with Other Pipes

<p>{{ (user$ | async)?.name | uppercase }}</p>
<p>{{ (price$ | async) | currency: 'USD' }}</p>