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.

birthday.component.html (template)

      
      <p>The hero's birthday is {{ birthday | date }}</p>

The component's birthday value flows through the pipe operator (|) to the DatePipe whose pipe name is date. The pipe renders the date in the default format as Apr 15, 1988.

Look at the component class.

birthday.component.ts (class)

      
      import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-birthday',
  templateUrl: './birthday.component.html',
  imports: [DatePipe],
})
export class BirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}

Because this is a standalone component, it imports the DatePipe from @angular/common, the source of all built-in pipes.

Last reviewed on Mon Aug 14 2023

Cookies concent notice

Using a pipe in a template