Using a pipe in a template

To apply a pipe, use the pipe operator (|) within a template expression as shown in the following code example, along with the name of the pipe, which is date for the built-in DatePipe.

The tabs in the example show the following:

  • app.component.html uses date in a separate template to display a birthday.
  • hero-birthday1.component.ts uses the same pipe as part of an in-line template in a component that also sets the birthday value.
<p>The hero's birthday is {{ birthday | date }}</p>
import { Component } from '@angular/core';

  selector: 'app-hero-birthday',
  template: "<p>The hero's birthday is {{ birthday | date }}</p>"
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based

The component's birthday value flows through the pipe operator, | to the date function.

Last reviewed on Thu Apr 07 2022

© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.