Using pipes

Go back to Tutorial

A pipe takes in data as input and transforms it to a desired output. In this page, you’ll use pipes to transform a component’s birthday property into a human-friendly date.


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


Focus on the component’s template.


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

Inside the interpolation expression, you flow the component’s birthday value through the pipe operator ( | ) to the Date pipe function on the right. All pipes work this way.

Go back to Tutorial

Get industry recognized certification – Contact us