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.
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/guide/pipe-template