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';

@Component({
  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.