Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

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