Angular built-in pipes examples

Angular provides different types of built-in pipes like DatePipe, CurrencyPipe, Upper/Lower/Title case pipes etc. In this post we shall see examples of some of the commonly used built-in pipes.

DatePipe
DatePipe is used format date and time, it takes a Date object followed by a date pipe, followed by a formatting parameter which tells how the date should be formatted

<Date Object> | date : <format>

Following are some of the sample for DatePipe formatting.

Pipe	Output
{{ currentDate | date: 'short' }}	11/27/18, 11:56 PM
{{ currentDate | date: 'medium' }}	Nov 27, 2018, 11:58:42 PM
{{ currentDate | date: 'long' }}	November 27, 2018 at 11:58:08 PM GMT-5
{{ currentDate | date: 'shortDate' }}	11/28/18
{{ currentDate | date: 'mediumDate' }}	Nov 28, 2018
{{ currentDate | date: 'longDate' }}	November 28, 2018
{{ currentDate | date: 'shortTime' }}	12:02 AM
{{ currentDate | date: 'mediumTime' }}	12:02:05 AM
{{ currentDate | date: 'longTime' }}	12:02:05 AM GMT-5

CurrencyPipe
The CurrencyPipe transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

CurrencyPipe takes a number as input, followed by the currency pipe and a parameter to specify the required format.

<number> | currency : <format parameters>

Following are some of the sample for CurrencyPipe formatting.

Pipe	Output
{{ 1500.45 | currency }}	$1,500.45
{{ 1500.45 | currency : 'USD' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'symbol' }}	$1,500.45
{{ 1500.45 | currency : 'USD' : 'code' }}	USD1,500.45

Angular built-in pipes

Angular pipes provide us an important feature of formatting / transforming data to a desired way in the view.

For example date formatting is one common requirement which we need in all applications. Angular provide different Date Pipes like shortDate, longDate, fullTime etc which come in handy to display different formats of dates in the UI.