The Angular Pipe takes the data as input and then transforms the raw data into the desired format. In other words, we can say that the angular pipes are used to transform the data into a specific format before displaying them to the end-users.

Pipes are one find of functions that you can use in template expressions to accept an input value and return a transformed value. We can declare the pipes once and can use them throughout the application.

We can use pipe features by using the pipe (|) operator to any property in the angular application. Angular Framework provides some built-in pipes such as lowercase, uppercase, titlecase, decimal, date, percent, currency, etc. It is also possible to create custom pipes according to our requirements.

Syntax -

Use the pipe operator (|) in the template expression to apply a pipe.

 

{{ input data | PipeName }}

 

Pipes in angular framework are divided into two types i.e. Built-in Pipes and Custom pipes. And the Built-in Pipes are further divided into two types i.e. Parameterized and chaining.

In an angular application, when we pass any parameters to the pipes, it is called parameterized pipes we can pass n number of parameters to pipes using a colon (:).

{{ input data | PipeName : parameter1 : parameter2 ... parameter n }}

We will be using parameterized date pipes and parameterized currency pipes in our application: In the date pipe, we can specify the date format by passing it as a parameter. In currency pipes, we can specify different currency codes as a parameter to transform them into a particular currency format.

Example 1

Create an angular application named “parameterized-pipes” by executing the following command:

 

ng new parameterized-pipes

 

For parameterized date pipes the format is as following:

 

{{ input data | date [ : format [ : timezone [ : locale ] ] ] }}

Parameters

 

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  today : number= Date.now();
}

In the typescript file, we create a variable “today” to store the current data. We use Date.now() method to fetch the current date and time.

app.component.html

Current Date : {{today | date}}
Full Date : {{today | date:fullDate}}
Medium Date : {{today | date:medium}}
Short Date : {{today | date:short}}
Date (dd/MM/yyyy) : {{today | date:dd/MM/yyyy}}
Time : {{today | date:h:mm a z}}
Medium Time : {{today | date:mediumTime}}

In the template file, we are using the parameterized data pipe to show different date formats.

We have used some pre-defined format options as a parameter such as fullDate, medium, short, mediumtime. And in some pipes, we have specified the format in which we want to convert the current date and time.

“date” is a simple non-parameterized pipe that is used to convert the current date in the MMM dd, yyyy format.

The "fullDate" parameter will specify the current date and day of the week in the format:EEEE,MMMM d,y.

The “medium” parameter will transform the date in the format MMM d, y, h:mm:ss a.

The “short” parameter will transform the date in the format M/d/yy, h:mm a.

The “mediumTime” will show the current time in the h:mm:ss a.

This code will generate the following output.

Example 2

Create an angular application named “parameterized-pipes” by executing the following command:

ng new parameterized-pipes