Pipes

Pipes transform values in the template. They take an input, apply a transformation, and return the formatted result for display. The original data in the class is unchanged — pipes only affect how values are displayed.

The pipe syntax

Use the | character to apply a pipe, followed by the pipe name:

<p>{{ movie.release_date | date }}</p>
<p>{{ movie.title | uppercase }}</p>
<p>{{ movie.vote_average | number:'1.1-1' }}</p>

Pipes can take arguments after a colon:

{{ movie.release_date | date:'yyyy' }}

Built-in pipes

Angular ships with a set of commonly needed pipes:

date — formats a date string or Date object:

{{ '2010-07-16' | date }}           <!-- Jul 16, 2010 -->
{{ '2010-07-16' | date:'yyyy' }}    <!-- 2010 -->
{{ '2010-07-16' | date:'MMMM d, y' }} <!-- July 16, 2010 -->

uppercase and lowercase — change letter case:

{{ 'inception' | uppercase }}  <!-- INCEPTION -->
{{ 'INCEPTION' | lowercase }}  <!-- inception -->

number — formats a number with decimal places and grouping:

{{ 8.8 | number:'1.1-1' }}     <!-- 8.8 -->
{{ 1234567 | number }}         <!-- 1,234,567 -->

currency — formats a number as a currency value:

{{ 9.99 | currency }}          <!-- $9.99 -->
{{ 9.99 | currency:'EUR' }}    <!-- €9.99 -->

slice — extracts a portion of an array or string:

{{ [1, 2, 3, 4, 5] | slice:0:3 }}  <!-- 1, 2, 3 -->
{{ 'Hello, world!' | slice:0:5 }}  <!-- Hello -->

The async pipe

The async pipe is special — it subscribes to an Observable or Promise and returns its current value. When the value changes, the template automatically updates. When the component is destroyed, the async pipe automatically unsubscribes.

home.ts

movies$: Observable<Movie[]>;

ngOnInit(): void {
  this.movies$ = this.movieService.getTrending();
}

home.html

@if (movies$ | async; as movies) {
  @for (movie of movies; track movie.id) {
    <app-movie-card [movie]="movie" />
  }
}

The async pipe eliminates the need to manually subscribe and unsubscribe in the component class. In CinemaVault, many data streams use the async pipe pattern.

Chaining pipes

Pipes can be chained:

{{ movie.title | slice:0:20 | uppercase }}

This takes the first 20 characters of the title, then uppercases the result.

Using pipes in the component’s imports

Pipes from @angular/common are available via CommonModule. If you use standalone components and want specific pipes, import them individually:

import { DatePipe, UpperCasePipe, AsyncPipe } from '@angular/common';

@Component({
  standalone: true,
  imports: [DatePipe, UpperCasePipe, AsyncPipe],
  // ...
})

Or import CommonModule to get all common pipes at once.

Exercise

1. Add a releaseDate = '2010-07-16' property and display it in three formats:
   • Full date: July 16, 2010
   • Year only: 2010
   • ISO format: 2010-07-16
2. Add a budget = 160000000 property and display it as currency: $160,000,000.00.
3. Add a tagline = 'your mind is the scene of the crime' and display it in uppercase.
4. Create a mock Observable: title$ = of('Inception') (import of from rxjs). Display it using the async pipe.

Recap

• Pipes transform values in templates using | pipeName syntax.
• Built-in pipes include date, uppercase, lowercase, number, currency, and slice.
• Arguments follow the pipe name after a colon: | date:'yyyy'.
• The async pipe subscribes to an Observable or Promise and automatically unsubscribes when the component is destroyed.
• Pipes can be chained: {{ value | pipe1 | pipe2 }}.