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.

src/app/hero-birthday1.component.ts

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

}

Focus on the component’s template.

src/app/app.component.html

<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